3 horizontal divs with margin issue - html

Question

I am currently building a E-commerce website for practice and the I have the div set up as follows:
.small-container {
max-width: 1080px;
margin: 5px;
padding-left: 25px;
padding-right: 25px;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
background-color: #87bdd8!important;
border-style: solid;
border-color: #1E90FF;
}
.col-4 img {
width: 100%;
border-style: solid;
}
<div class="small-container">
<h2>Merch by Elute FLP</h2>
<div class="row">
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
<div class="col-4">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
I'm extremely new to coding and using this platform so I apologize if this looks really bad or if i'm asking a dumb question trying not to rely on tutorials and think for myself but I can't seem to find the answer anywhere. I want the divs to have space and when I add any margin the last div wraps.
Using Atom Framework and unsure why when code run with tool on here shows elements vertical. On Atom when I load the page they are horizontal...

Answer 1

Since you use columns with flex-basis, you have to make the div with class row a flex parent.
I also suggest that you use the columns for grid and style their content separately. In the example below I have created .card elements, which are wrapped inside the columns.
And finally - extremely important: set the box-sizing of the columns to border-box. This means you can set paddings to the columns (instead of margins), which will be counted in the 25% of the column width. This is why it will be better to avoid horizontal margins in this scenario, because this will break the Maths - you want 4 columns with 25% width, but where should the space between them go?
.small-container {
max-width: 1080px;
margin: 5px;
padding-left: 25px;
padding-right: 25px;
}
/* The columns is simplified only to shape the grid */
.col-4 {
flex-basis: 25%;
box-sizing: border-box;
margin-bottom: 50px;
padding: 0 10px;
}
.col-4 img {
width: 100%;
border-style: solid;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* Styling the column content */
.card {
flex-basis: 25%;
padding: 10px;
background-color: #87bdd8 !important;
border-style: solid;
border-color: #1E90FF;
}
<div class="small-container">
<h2>Merch by Elute FLP</h2>
<div class="row">
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="Pictures/JeansandTee.jpg">
<h5>Black Graphic T-Shirt</h5>
<p class="price">$29.99</p>
<p>Black Shirt w Graphic 100% cotton</p>
<p><button>Add to Cart</button></p>
</div>
</div>
</div>
</div>