css margin targeting the container instead of the images - html

Question

I'm currently making a personal webpage using simple HTML and CSS codes. I'm currently stuck in a problem in the CSS part where I have to make 3 pictures appear in their 3 respective columns. It worked earlier before I added the div class intro. I did try removing it, undid changes, but it didn't go back to how it used to go. I'm actually self-taught and haven't been taking proper classes, so I may not understand too complicated explanation and I'm really sorry for that. Here's how my code looks.
HTML:
<div class="me">
<div class="smallcontainer">
<div class="row">
<div class="col-3">
<img src ="me/me.jpg"></img>
</div>
<div class="col-3">
<img src ="me/me3.jpg"></img>
</div>
<div class="col-3">
<img src ="me/me4.jpg"></img>
</div>
</div>
</div>
<div class="intro">
<h1>My name's Shinji</h1>
</div>
</div>
CSS:
.me {
background-color: black;
padding: 50px 50px;
}
.row {
display: flex;
}
.col-3 {
flex-basis:30%;
max-width: 250px;
margin-bottom: 30px;
}
.smallcontainer {
margin: auto;
max-width: 1080px;
margin-left:100px;
margin-right: 100px;
}
.smallcontainer img{
width: 250px;
margin-left: 20px;
}
.intro {
color:white;
font-size: 100px;
}
Here's an image on how it looked liked before it stopped working (without the black background)
Here's how it looked life AFTER. It seems like .smallcontainer img is targeting the img properly, but when I tell it to margin-left, it literally gives a margin only to the left-most picture, and not the other images. I've been frustrated about this for hours and I don't know what's going on.

Answer 1

.me {
background-color: black;
padding: 50px 50px;
}
.row {
display: flex;
}
.col-3 {
flex-basis:30%;
max-width: 250px;
margin-bottom: 30px;
margin: 20px; /* add this line */
}
.smallcontainer {
margin: auto;
max-width: 1080px;
margin-left:100px;
margin-right: 100px;
}
.smallcontainer img{
width: 250px;
margin-left: 20px;
}
.intro {
color:white;
font-size: 100px;
}
try this css