Столкнулся с проблемой выравнивания по центру.
Пытался выровнить с помощью пустых div вначале и в конце линий с элементами.
Так же пытался сделать их flex(inline-flex) и с выровнить с помощью justify-content.
Пытался с помощью margin и почему-то он не работает что только не делал.
В кратце перепробовал все варианты с ним(может нет)
Кому не сложно объясните подробно что делаю не так и где ошибки, и если сможете найти решение буду очень благодарен
мой первый пост, не судите строго пожалуйста
/*
///////////////
MAIN
///////////////
*/
main {
margin-top: 100px;
font-weight: 300;
}
.product1,
.product2,
.product3,
.product4,
.product5,
.product6,
.product7,
.product8 {
height: 290px;
width: 210px;
display: inline-block;
margin: 40px 25px;
/*position: relative;*/
outline: 2px solid red;
}
.product1,
.product5 {
margin-left: 0;
}
.product4,
.product8 {
margin-right: : 0;
}
.imgP1,
.imgP2,
.imgP3,
.imgP4,
.imgP5,
.imgP6,
.imgP7,
.imgP8 {
height: 210px;
width: 210px;
outline: 2px solid yellow;
}
.productsBackImage {
height: 210px;
width: 210px;
}
.infoP1,
.infoP2,
.infoP3,
.infoP4,
.infoP5,
.infoP6,
.infoP7,
.infoP8 {
height: 80px;
width: 210px;
outline: 2px solid black;
}
/*.firsstLine_start {
width: 90px;
display: inline-block;
outline: 1px solid black;
height: 290px;
}
.firsstLine_end {
width: 90px;
display: inline-block;
outline: 1px solid black;
height: 290px;
}
.secondLine_start {
width: 90px;
display: inline-block;
outline: 1px solid black;
height: 290px;
}
.secondLine_end {
width: 90px;
display: inline-block;
outline: 1px solid black;
height: 290px;
}*/
<main id="mainContent">
<div class="mainProducts">
<div class="firsstLine_start">
</div>
<div class="product1">
<div class="imgP1">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP1">
<span><a href="#"></a></span>
</div>
</div>
<div class="product2">
<div class="imgP2">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP2">
<span><a href="#"></a></span>
</div>
</div>
<div class="product3">
<div class="imgP3">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP3">
<span><a href="#"></a></span>
</div>
</div>
<div class="product4">
<div class="imgP4">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP4">
<span><a href="#"></a></span>
</div>
<div class="firsstLine_end">
</div>
</div>
<div class="secondLine_start">
</div>
<div class="product5">
<div class="imgP5">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP5">
<span><a href="#"></a></span>
</div>
</div>
<div class="product6">
<div class="imgP6">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP6">
<span><a href="#"></a></span>
</div>
</div>
<div class="product7">
<div class="imgP7">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP7">
<span><a href="#"></a></span>
</div>
</div>
<div class="product8">
<div class="imgP8">
<a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
</div>
<div class="infoP8">
<span><a href="#"></a></span>
</div>
<div class="secondLine_end">
</div>
</div>
</div>
</main>