Is there a way to remove the violet margin that I'm trying to modify?
Additionally, can I specify how many items I want in a certain row using CSS? For example, instead of having 3 items followed by 1 item at 1500px, I would like to have 3 items followed by another 3 items.
Thank you for your help!
Image: https://i.sstatic.net/dcK3i.jpg
* {
padding: 0;
margin: 0;
font-family: Georgia;
}
.row {
width: 95%;
height: auto;
display: flex;
margin: 0 auto;
flex-flow: wrap;
justify-content: space-around;
}
.items {
width: 95%;
margin: 0 auto;
}
.item img {
vertical-align: top;
width: 290px;
height: 400px;
margin: 2px auto 14px auto;
box-shadow: 0px 0px 12px rgba(120, 17, 25, .7);
display: block;
opacity: 0.95;
}
.item {
box-shadow: 0px 0px 8px #000;
margin: 0px auto 30px auto;
padding: 15px 0;
width: 330px;
}
@media screen and (max-width:800px) {
.search form {
width: 95%;
}
.search input {
width: 100%;
}
.search select {
width: 100%;
margin-top: 5px;
}
}<html>
<body>
<main>
<div class="items">
<div class="row">
<div class="item">
<img src="img/1.jpg" />
<h2>Lorem Ipsum</h2>
<h3>$101</h3>
<div class="buy_buttons">
<button class="b_buy">Comprar</button>
<button class="b_vista">Vista</button>
</div>
</div>
...
</div>
<div class="row">
...
</div>
</div>
</main>