У меня произошел баг после того, как я сместил ближе к тексту границу фона, сразу было все нормально
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8">
<title>Билл Гейтс</title>
</head>
<body>
<div class ="summa">
<link href="https://fonts.google.com/specimen/Recursive"
rel="stylesheet" type="text/css">
<h1 align = center><a href ="https://www.google.com/search?q=%
D0%B1%D0%B8%D0%BB%D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe
=active&hl=ru&sxsrf=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596
462929977&source=lnms&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAh
ULrosKHXaDCVMQ_AUoAXoECBgQAw&biw=1536&bih=706">Билл Гейтс</a></h1>
<div class = "text"align = center>
<h2>
sУи́льям Ге́нри Гейтс III (28 октября 1955, Сиэтл, Вашингтон), <br>
более известный как Билл Гейтс — американский предприниматель и общественный деятель, <br>
филантроп, один из создателей (совместно с Полом Алленом) <br>
и бывший крупнейший акционер компании <a href = "https://ru.wikipedia.org/wiki/Microsoft"> Microsoft</a>. <br>
</h2>
</div>
<div class="slider__content">
<div class="slider" id="slider">
<div class="polosa" id="polosa">
<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%B
B%D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sx
srf=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=
lnms&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUo
AXoECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл1.jpg" alt=""></a>
<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%BB%
D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sxsrf
=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=lnm
s&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUoAXo
ECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл2.Jpeg" alt=""></a>
<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%BB%
D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sxsrf
=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=lnm
s&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUoAXo
ECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл3.jpg" alt=""></a>
</div>
</div>
<button class="right" id="slider-right">Вправо</button>
<button class="left" id="slider-left">Влево</button>
</div>
<div>
<h2 class = "text" align = center>
Является сопредседателем благотворительного Фонда <br>
Билла и Мелинды Гейтс.<br>
В период с 1996 по 2007 год, с 2009 по 2016 год — <br>
самый богатый человек планеты по версии журнала Forbes.<br>
</h2>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>
@font-face {
font-family: Lemonada;
src:url("Lemonada-Bold.tth");
}
.text {
font-family: Lemonada;
}
.slider__content {
width: 1536px;
margin: 0px;
}
.slider {
width: 512px;
height: 512px;
margin: 50px auto;
overflow: hidden;
}
.polosa {
background: yellowgreen;
width: 1536px;
position: relative;
transition: all .5s;
}
.polosa img {
width: 512px;
height: 512px;
float: right;
border-radius: 30%;
}
.polosa::after {
content: '';
display: block;
clear: both;
}
button {
position: absolute;
background-color: red;
outline: none;
padding: 8px 0;
border-radius: 2px;
font-size: 14px;
font-weight: 600;
border: 2px solid black;
cursor: pointer;
top: 36%;
width: 80px;
}
.left {
border-radius: 30px;
left: 30%;
}
.right {
border-radius: 30px;
right: 28%;
}
.summa {
background-color: yellowgreen;
border-style: solid;
border-color: white;
border-width: 5px;
margin-top: 20px;
margin-left: 200px;
margin-right: 200px;
}
document.getElementById('slider-left').onclick = sliderLeft;
document.getElementById('slider-right').onclick = sliderRight;
var left = 0;
var polosa = document.getElementById('polosa');
function sliderLeft() {
left = left - 512;
if (left < -1024) {
left = 0;
}
polosa.style.left = left + 'px';
}
function sliderRight() {
left = left + 512;
if (left > 0) {
left = -1024;
}
polosa.style.left = left + 'px';
}
