Same images with same code but not the same size ? / Flexbox

Hi everyone, first of all you must know that I’m 3 days old onto web dev so I might say stupid things !
Secondly I’m french, please pardon my english.

To give you some context, I’m following the course on HTML & CSS and I’m at the point where I have to make a webpage for Colmar Academy.

My issue is here

link to code

It seems to me that according to the code, the 3 squares on the right should be the same size and should also be align. In fact, they’re not, even the second one is slightly ofset from the first one by 1 or 2 px.

The solution I found was to change

.article-right img {
    width: 40%;
    padding: 16px 16px;
}

to

.article-right img {
    max-width: 40%;
    padding: 16px 16px;
}

For some reason the max-width atttribute seems to solve the probleme but I really don’t understand why.

I think in this case, the reason max-width is working is because your image is only 50px x 50px. Since you set the max and not the size, all of the images can appear as 50px instead of being stretched to the 40% of the available space, which is much larger than the 50px.

The reason they are appearing as different sizes when you’re using width is because the available space is varying. Right now, the longer paragraph next to your 3rd square pushes it over. Even the 2nd one has a slight offset because of the different length of the paragraph. If you shorten up the paragraph, you’ll see the size changing.

You could set the width of the div that has the paragraph and other text elements.

Example from your code:

            <div class="flex-container">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Square-symbol.svg/50px-Square-symbol.svg.png">
                <div class="test"> <!-- added a class here -->
                    <h2>Our guest lecture</h2>
                    <p>Join a keynote with Oliver Stack about music and musical treatment</p>
                    <span><a href="#">Read more</a></span>
                </div>
            </div>

Notice I added a test class to your div so we can set a css rule

.flex-container .test {
    width: 50%;
}

That’s just an example, of course. I threw in a random value just to demonstrate. Now you can use width for your image and it will stretch the image, but they will all be the same size even for the sections with a longer paragraph (as long as you added the test class to the right div in each section, of course)

Ohhhh ok I get it. I didn’t undestand the connexion with

.

Thanks a lot for your quick answer.