Why is the last image not in the first column?

I have provided both the HTML and CSS for this. Do not run the code in freecodecamp editor, it does not work well for some reason. Now the problem is, when I run the code using VS Code as an editor and expand the window of Chrome so that there are 4 images in each row, the last image should appear alone on the last row in the first column but for some reason the first column is empty and it appears in the second column. I do not understand why that is happening. According to my knowledge it should appear in the first column.

There were a total of nine images but freecodecamp is only letting me insert one.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flexbox Photo Gallery</title>
</head>

<body>
    <h1>CSS Flexbox Photo Gallery</h1>
    <div class="container">
        <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"  alt="">
    </div>
</body>

<html>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: tahoma;
    background-color: beige;
}

h1 {
    text-align: center;
    background-color: #A3D9CF;
    margin: 0;
    padding: 40px;
    border-bottom: 10px solid #8C5E4D;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.container img {
    width: 300px;
    height: 350px;
    object-fit: cover;
    border-radius: 5px;
}

.container::after {
    content: "";
    width: 300px;
}

Hi there and welcome to our community!

I have edited your code for legibility. When you wish to post code on the forum, please enclose it within two sets of triple backticks, so that it displays correctly. You can do this manually or use the Preformatted Text tool (</> or CTRL+e).

3 Likes

Thanks for the guidance♥️, I am new here.

Any idea on the problem I am facing?

The code you provided only has 1 image

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.