Нужно чтобы div'ы были в одной строке, но последний div переносится на следующую строку и выходит за пределы класса explore. Если уменьшить масштаб в браузере, то элементы помещаются в одной строке.
HTML:
<div class="container">
<div class="explore padding-site">
<div class="explore-controll clearfix">
<ul class="explore-controll-menu">
<li class="explore-controll-item"><a class="explore-controll-link-active" href="#">Featured </a></li>
<li class="explore-controll-item"><a class="explore-controll-link" href="#"> New </a></li>
</ul>
<a class="explore-controll-all" href="#">explore all <img class="explore-arrow" src="src/img/arrow.png" alt=""></a>
</div>
<div class="explore-product">
<img class="explore-product-image" src="src/img/product-1.jpg" alt="Product 1">
<div class="explore-product-hover">
<a class="explore-product-hover-circle" href="#"><img class="explore-arrow-hover" src="src/img/arrow.png" alt=""></a>
<h3 class="explore-product-hover-h3">Fishnet Chair</h3>
<p class="explore-product-hover-text">Seat and back with upholstery made of cold cure foam</p>
</div>
</div>
<div class="explore-product">
<img class="explore-product-image" src="src/img/product-2.jpg" alt="Product 2">
<div class="explore-product-hover">
<a class="explore-product-hover-circle" href="#"><img class="explore-arrow" src="src/img/arrow.png" alt=""></a>
<h3 class="explore-product-hover-h3">Fishnet Chair</h3>
<p class="explore-product-hover-text">Seat and back with upholstery made of cold cure foam</p>
</div>
</div>
<div class="explore-product">
<img class="explore-product-image" src="src/img/product-3.jpg" alt="Product 3">
<div class="explore-product-hover">
<a class="explore-product-hover-circle" href="#"><img class="explore-arrow" src="src/img/arrow.png" alt=""></a>
<h3 class="explore-product-hover-h3">Fishnet Chair</h3>
<p class="explore-product-hover-text">Seat and back with upholstery made of cold cure foam</p>
</div>
</div>
<div class="explore-product">
<img class="explore-product-image" src="src/img/product-4.jpg" alt="Product 4">
<div class="explore-product-hover">
<a class="explore-product-hover-circle" href="#"><img class="explore-arrow" src="src/img/arrow.png" alt=""></a>
<h3 class="explore-product-hover-h3">Fishnet Chair</h3>
<p class="explore-product-hover-text">Seat and back with upholstery made of cold cure foam</p>
</div>
</div>
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.padding-site {
padding-left: 98px;
padding-right: 98px;
}
body {
font-family: 'Montserrat', sans-serif;
}
.explore {
height: 609px;
position: absolute;
}
.explore-controll {
padding-top: 120px;
}
.explore-controll-menu {
float: left;
}
.explore-controll-item {
float: left;
list-style-type: none;
}
.explore-controll-link {
display: block;
color: #6c6c6c;
font-size: 36px;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid #6c6c6c;
}
.explore-controll-link-active {
color: #212121;
font-size: 36px;
font-weight: 700;
text-decoration: none;
border-bottom: 3px solid #212121;
}
.explore-controll-all {
float: right;
color: #212121;
font-size: 18px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3.6px;
}
.explore-arrow {
width: 9px;
height: 12px;
}
.explore-arrow-hover {
width: 12px;
height: 20px;
}
.explore-product {
float: left;
width: 270px;
height: 270px;
padding-top: 50px;
padding-bottom: 120px;
padding-right: 30px;
}
.explore-product-hover-circle {
display: block;
text-align: center;
width: 48px;
height: 48px;
box-shadow: 0 2px 5px 1px rgba(33, 33, 33, 0.35);
border-radius: 24px;
background-color: #ffffff;
}
.explore-product-hover-h3 {
color: #212121;
font-size: 22px;
font-weight: 700;
line-height: 29.88px;
}
.explore-product-hover-text {
color: #6c6c6c;
font-size: 14px;
font-weight: 300;
line-height: 21.91px;
}