Я довольно новичок в этом, я пытался настроить caousel слайдера на моей веб-странице, но я изо всех сил пытаюсь понять, почему ширина моих фоновых изображений не умещается на весь экран.Слева есть небольшой пробел. Я уверен, что причина для некоторых вполне очевидна, но я просто не вижу ее, пожалуйста, найдите мой код ниже.
*
html body
{
margin:0;
padding:0;
}
body{
height:3000px;
}
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in;
}
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider,.slider ul,.slider ul li
{
height:700px;
width:100%;
color:white;
text-align: center;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna
euismod.Praesent nibh leo, auctor vel po
rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis
tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna
euismod.Praesent nibh leo, auctor vel po
rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis
tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna
euismod.Praesent nibh leo, auctor vel po
rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis
tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
</section>