Почему появилась горизонтальная полоса прокрутки ?
<spoiler title="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="container">
<img src="img/icon.jpg" alt="">
<div class="navigation">
<a href="#">about</a>
<a href="#">meet us</a>
<a href="#">gallery</a>
<a href="#">blog</a>
<a href="#">adventures</a>
</div>
</div>
</header>
<div class="hero">
<div class="bg"></div>
<div class="container">
<div class="content">
<div class="text">
<span class="supTitle">Live your</span> <br>
<span class="subTitle">adventure</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <br>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Take me there</a>
</div>
</div>
</div>
</div>
<div class="adventures">
<div class="container">
<div class="camping">
<span>camping</span>
<p>Lorem ipsum dolor sit amet, consectetur adip</p>
</div>
<div class="hiking">
<span>hiking</span>
<p>Lorem ipsum dolor sit amet, consectetur adip</p>
</div>
<div class="diving">
<span>diving</span>
<p>Lorem ipsum dolor sit amet, consectetur adip</p>
</div>
</div>
</div>
<section class="discount">
<div class="container">
<p>Sign up for</p>
<span>Discounts</span>
<form class="discount" action="index.php" method="post">
<input type="text" placeholder="Email Address">
<button type="button" name="button" value="Subscribe"></button>
</form>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="col__one">
<div class="row__one"></div>
<div class="row__two"></div>
<div class="row__three"></div>
</div>
<div class="col__two">
<div class="row__one"></div>
<div class="row__two"></div>
<div class="row__three"></div>
</div>
</div>
</section>
</body>
</html>
</spoiler>
<spoiler title="CSS">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
/* Header */
header{
width: 100%;
height: 100px;
background: rgba(248, 248, 248, 0.5);
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 1000;
}
header .container img{
margin-top: 20px;
float: left;
opacity: 1;
}
header .container .navigation{
display: flex;
justify-content: center;
}
header .container .navigation a{
position: relative;
top: 30px;
margin-right: 50px;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 20px;
opacity: 1;
}
header .container .navigation a:last-child{
position: relative;
bottom: 20px;
left: 200px;
background-color: #ff7340;
color: #fff;
border-radius: 50px;
padding: 10px;
}
header .container .navigation a:last-child:hover{
background: #000;
}
/* Hero */
.hero .content{
position: relative;
bottom: 800px;
}
.hero .bg{
width: 100%;
height: 100vh;
background: url('../img/bg.png') no-repeat;
position: relative;
left: 1080px;
bottom: 40px;
}
.hero .content .text .supTitle{
color: #2f3c4d;
font-size: 64px;
}
.hero .content .text .subTitle{
color: #ff7340;
font-size: 66px;
text-transform: uppercase;
font-weight: 500;
}
.hero .content .text p{
font-size: 18px;
}
.hero .content .text a{
font-size: 24px;
background-color: #ff7340;
border-radius: 50px;
padding: 9px;
text-decoration: none;
color: #fff;
position: relative;
top: 8px
}
.hero .content .text a:hover{
background-color: #000;
}
/* Adventures */
.adventures {
position: relative;
bottom: 350px;
}
.adventures .container{
display: flex;
flex-direction:row;
}
.adventures .camping, .adventures .hiking, .adventures .diving{
width: 360px;
height: 240px;
background-color: #cc5c33;
margin-left: 30px;
border-radius: 10px;
}
.adventures .container span{
color: #fff;
font-size: 24px;
text-transform: uppercase;
position: relative;
top: 30px;
margin: 0 120px;
}
.adventures .container p{
color: #fff;
position: relative;
margin-left:30px;
top:35px;
}
/* Discount */
.discount{
width: 100%;
height: 400px;
background-color: #ff7340;
position: relative;
bottom: 200px;
}
.discount .container p{
font-size: 46px;
color: #fff;
}
.discount .container span{
color: #fff;
text-decoration: underline;
font-size: 58px;
text-transform: uppercase;
}
.discount .container form{
height: 20px;
position:relative;
top: 5px;
}
.discount .container form button{
width: 90px;
height: 20px;
position: relative;
top: 4px;
}
.discount .container input{
background-color: #823B21;
}
/* Gallery */
.gallery .container .col__one{
display: flex;
flex-direction: row;
}
.gallery .container .col__two{
display: flex;
flex-direction: row;
}
.gallery .container .col__one .row__one{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
}
.gallery .container .col__one .row__two{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
margin-left: 20px;
}
.gallery .container .col__one .row__three{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
margin-left: 20px;
}
.gallery .container .col__two .row__one{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
}
.gallery .container .col__two .row__two{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
margin-left: 20px;
}
.gallery .container .col__two .row__three{
width: 360px;
border-radius: 10px;
height: 240px;
background-color: #e56739;
margin-left: 20px;
}
</spoiler>
