Company Home Page with Flexbox

Hi all,

I’m currently working on the “Company Home Page with Flexbox” task (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-making-a-website-responsive/modules/fecp-challenge-project-company-home-page/projects/company-page-with-flexbox), however, I’ve run into a couple of difficulties.

Firstly, I want my navigation bar items to appear in the middle of the screen, not the right-hand side. However, no matter what I try it keeps appearing on the right-hand side. How do I change this?

Secondly, why is there such a big gap under my navigation tab?

Thirdly, and most importantly, I want the photos of the different people to appear like the example site (VC Enterprise Portfolio), next to each other, on the same line, with the blurry photo of the library as the background. However, no matter what I try, the photo of Winston Churchill keeps appearing massive and I can’t correct the other two photos.

I’ve included two screenshots below to show what is happening.

Here’s my code too:

/*index.html*/

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

<head>
    <meta charset="utf-8">
    <title>The Book Experience</title>
    <link rel="stylesheet" href="style.css">
    <meta>
</head>

<body>
    <header>
        <img class="logo" src="Images/Logo.png" alt="Book Experience Logo">
        <nav>
            <ul class="navigation">
                <li><a href="#mission-target">Mission Statement</a></li>
                <li><a href="#featured-tea-target">Portfolio</a></li>
                <li><a href="#locations-target">Investment Team</a></li>
            </ul>
        </nav>
    </header>

    <a href="" id="mission-target"></a>
    <section class="mission-container">
        <div class="mission-statement-container">
            <h2>The Book Experience</h2>
            <h4>We exist to help give everyone a love of reading</h4>
        </div>
    </section>

    <a href="" id="featured-tea-target"></a>
    <section class="featured-container">
        <div class="featured-statement">
            <h2>Our Book Portfolio</h2>
            <h4>Which genres can we help with?</h4>
        </div>
        <div class="flexbox-center">
            <div class="img-container"> 
                <figure>
                    <img src="Images/Churchill.jpg" alt="Adventure Book">
                    <figcaption>Biographies and Auto-Biographies</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Science_Fiction_Book.jpg" alt="Science Fiction Book">
                    <figcaption>Science Fiction</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Adventure_Book.jpg" alt="Adventure">
                    <figcaption>Adventure</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Mystery_Book.jpg" alt="Mystery">
                    <figcaption>Mystery</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Children_Book.jpg" alt="Children's Stories">
                    <figcaption>Children's Stories</figcaption>
                </figure>
            </div>
        </div>
    </section>

    <a href="" id="locations-target"></a>
    <section class="team-container">
        <div class="team-statement">
            <h2>Our Team</h2>
        </div>
            <div class="person-container"> 
            <figure>
                <img src="Images/Winston_Churchill.jpg" alt="Winston Churchill">
                <figcaption>Winston Churchill<br>C.E.O. - Founder and Principal Investor</figcaption>
            </figure>
            </div>
            <div class="person-container"> 
                <figure>
                    <img src="Images/J._R._R._Tolkien.jpg" alt="J. R. R. Tolkien">
                    <figcaption>J. R. R. Tolkien<br>Partner - Research & Development</figcaption>
                </figure>
            </div>
            <div class="person-container"> 
                <figure>
                    <img src="Images/Roald_Dahl.jpg" alt="Roald Dahl">
                    <figcaption>Roald Dahl<br>Partner - Partnerships & Marketing</figcaption>
                </figure>
            </div>
    </section>

    <section class="contact-container">
        <h2>The Book Experience</h2>
        <h5>contact@thebookexperience.com</h5>
        <h4>01234 567890</h4>
    </section>

    <footer>
        <h5>copyright The Book Experience 2021</h5>  
    </footer>

</body>

</html>
/*style.css*/

/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 22px;
    line-height: normal;
}

body {
    background-color: whitesmoke;
    color: black;
    opacity: 0.9;
}

/*NAVIGATION BAR STYLES*/

header {
    height: 69px;
    width: 100%;
    top: 0;
    z-index: 2;
    border-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    height: 100px;
    margin-left: 10px;
}

.navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 0;
    list-style: none;
}

.navigation a {
    text-decoration: underline;
    display: block;
    margin: 0 40px;
    color: black;
}

.navigation a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 700px) {
    .navigation {
        flex-flow: column wrap;
        padding: 0;
    }

    .navigation a {
        text-align: center;
        padding: 10px;
    }

    header {
        height: auto;
    }
}

/*MISSION SECTION STYLES*/

.mission-container {
    display: flex;
    position: relative;
    top: 70px;
    height: 700px;
    width: 1200px;
    background-image: url(./Images/Book-Experience.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    margin: auto;
}

@media screen and (max-width: 1200px){
    .mission-container {
        width: auto;
    }

    .mission-container h2, h4{
        width: auto;
    }
    
}

@media screen and (max-width: 700px) {
    .mission-container {
        top: 138px;
    }
    
}

.mission-container h2{
    background-color: whitesmoke;
    width: 1200px;
    text-align: center;
    padding: 20px 0 5px 0;
}

.mission-container h4{
    background-color: whitesmoke;
    width: 1200px;
    text-align: center;
    padding-bottom: 20px;
}

.mission-statement-container {
    flex-shrink: 2;
}

/*BOOK PORTFOLIO SECTION STYLES*/

.featured-container {
    width: 1000px;
    margin: 150px auto 90px auto;
    position: relative;
}

.featured-statement {
    text-align: center;
    margin: 20px;
}

.featured-statement h4 {
    margin: 20px 0;
}

.flexbox-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.img-container {
    display: block;
}

.img-container img {
    height: 200px;
    width: 300px;
    flex-basis: auto;
    margin: 10px;
}

figcaption {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}

/*TEAMS SECTION STYLES*/

.team-container {
    width: 1200px;
    height: 500px;
    margin: 0;
    padding: 0;
    background-image: url(./Images/Library-Background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.team-statement {
    text-align: center;
    width: 100%;
}

.person-container {
    width: 300px;
    height: 250px;
    margin: 30px 40px;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*CONTACT SECTION STYLES*/

.contact-container {
    text-align: center;
    height: 200px;
    width: auto;
}

.contact-container h2 {
    margin-top: 30px;
}

.contact-container h5, .contact-container h4 {
    margin: 35px;
}

/*FOOTER STYLES*/

footer h5 {
    margin: 20px;
    float: left;
}


Hi @board9685990051

Currently, you set the header to display flex, which means that the direct children <img> and <nav> share the available horizontal space. If you want the nav to appear below the logo image, move the flex styles one level down to the nav selector.

Because you set the parent container to a fixed height and the children to align-items: center, which aligns them vertically. It is very helpful to add visible borders to all elements in question. Then you can see much faster which element(s) to take under scrutiny.

Move the headline container out of the team-container. Then it should work.

Hi, thanks a lot for your help! I have managed to fix the first two issues using your suggestions, thank you so much! :grinning:

However, I tried your solution for the third issue but it hasn’t fixed the issue - the images inside the “team-container” section are still appearing on top of each other (see screenshots below).

Also, I have adjusted my code slightly; here it is:

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

<head>
    <meta charset="utf-8">
    <title>The Book Experience</title>
    <link rel="stylesheet" href="style.css">
    <meta>
</head>

<body>
    <header>
        <img class="logo" src="Images/Logo.png" alt="Book Experience Logo">
        <nav>
            <ul class="navigation">
                <li><a href="#mission-target">Mission Statement</a></li>
                <li><a href="#featured-tea-target">Portfolio</a></li>
                <li><a href="#locations-target">Investment Team</a></li>
            </ul>
        </nav>
    </header>

    <a href="" id="mission-target"></a>
    <section class="mission-container">
        <div class="mission-statement-container">
            <h2>The Book Experience</h2>
            <h4>We exist to help give everyone a love of reading</h4>
        </div>
    </section>

    <a href="" id="featured-tea-target"></a>
    <section class="featured-container">
        <div class="featured-statement">
            <h2>Our Book Portfolio</h2>
            <h4>Which genres can we help with?</h4>
        </div>
        <div class="flexbox-center">
            <div class="img-container"> 
                <figure>
                    <img src="Images/Churchill.jpg" alt="Adventure Book">
                    <figcaption>Biographies and Auto-Biographies</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Science_Fiction_Book.jpg" alt="Science Fiction Book">
                    <figcaption>Science Fiction</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Adventure_Book.jpg" alt="Adventure">
                    <figcaption>Adventure</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Mystery_Book.jpg" alt="Mystery">
                    <figcaption>Mystery</figcaption>
                </figure>
            </div>
            <div class="img-container"> 
                <figure>
                    <img src="Images/Children_Book.jpg" alt="Children's Stories">
                    <figcaption>Children's Stories</figcaption>
                </figure>
            </div>
        </div>
    </section>

    <a href="" id="locations-target"></a>
    <div class="team-statement">
        <h2>Our Team</h2>
    </div>
    <section class="team-container">
            <div class="person-container"> 
            <figure>
                <img src="Images/Winston_Churchill.jpg" alt="Winston Churchill">
                <figcaption>Winston Churchill<br>C.E.O. - Founder and Principal Investor</figcaption>
            </figure>
            </div>
            <div class="person-container"> 
                <figure>
                    <img src="Images/J._R._R._Tolkien.jpg" alt="J. R. R. Tolkien">
                    <figcaption>J. R. R. Tolkien<br>Partner - Research & Development</figcaption>
                </figure>
            </div>
            <div class="person-container"> 
                <figure>
                    <img src="Images/Roald_Dahl.jpg" alt="Roald Dahl">
                    <figcaption>Roald Dahl<br>Partner - Partnerships & Marketing</figcaption>
                </figure>
            </div>
    </section>

    <section class="contact-container">
        <h2>The Book Experience</h2>
        <h5>contact@thebookexperience.com</h5>
        <h4>01234 567890</h4>
    </section>

    <footer>
        <h5>copyright The Book Experience 2021</h5>  
    </footer>

</body>

</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 22px;
    line-height: normal;
}

body {
    background-color: whitesmoke;
    color: black;
    opacity: 0.9;
}

/*NAVIGATION BAR STYLES*/

header {
    height: 69px;
    width: 100%;
    top: 0;
    z-index: 2;
    border-bottom: 1px;
    justify-content: space-between;
}

nav {
    display: flex;
}

.logo {
    height: 100px;
    margin-left: 10px;
}

.navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 0;
    list-style: none;
}

.navigation a {
    text-decoration: underline;
    display: block;
    margin: 0 40px;
    color: black;
}

.navigation a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 700px) {
    .navigation {
        flex-flow: column wrap;
        padding: 0;
    }

    .navigation a {
        text-align: center;
        padding: 10px;
    }

    header {
        height: auto;
    }
}

/*MISSION SECTION STYLES*/

.mission-container {
    display: flex;
    position: relative;
    top: 70px;
    height: 700px;
    width: 1200px;
    background-image: url(./Images/Book-Experience.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    margin: auto;
}

@media screen and (max-width: 1200px){
    .mission-container {
        width: auto;
    }

    .mission-container h2, h4{
        width: auto;
    }
    
}

@media screen and (max-width: 700px) {
    .mission-container {
        top: 138px;
    }
    
}

.mission-container h2{
    background-color: whitesmoke;
    width: 1200px;
    text-align: center;
    padding: 20px 0 5px 0;
}

.mission-container h4{
    background-color: whitesmoke;
    width: 1200px;
    text-align: center;
    padding-bottom: 20px;
}

.mission-statement-container {
    flex-shrink: 2;
}

/*BOOK PORTFOLIO SECTION STYLES*/

.featured-container {
    width: 1000px;
    margin: 150px auto 90px auto;
    position: relative;
}

.featured-statement {
    text-align: center;
    margin: 20px;
}

.featured-statement h4 {
    margin: 20px 0;
}

.flexbox-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.img-container {
    display: block;
}

.img-container img {
    height: 200px;
    width: 300px;
    flex-basis: auto;
    margin: 10px;
}

figcaption {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}

/*TEAMS SECTION STYLES*/

.team-container {
    width: 1200px;
    height: 700px;
    top: 40px;
    margin: auto;
    padding: 0;
    background-image: url(./Images/Library-Background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
}

.team-statement {
    text-align: center;
}

.person-container {
    width: 300px;
    height: 250px;
    margin: 30px 40px;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*CONTACT SECTION STYLES*/

.contact-container {
    text-align: center;
    height: 200px;
    width: auto;
}

.contact-container h2 {
    margin-top: 30px;
}

.contact-container h5, .contact-container h4 {
    margin: 35px;
}

/*FOOTER STYLES*/

footer h5 {
    margin: 20px;
    float: left;
}


If the background image doesn’t show up in another browser, it is because you forgot to wrap the path in quote marks.
I assume that adding borders to the containers would help here, too: If you add borders to the person containers and set the images to opacity: 0.5, I assume you would see that the containers are in the right place but the images overflow their parent containers. I don’t know the width of your viewport when you took the screenshot, but I assume it was quite large and the images are huge? Then max-width is the key. And borders, borders, borders :slight_smile:

I followed your suggestions and managed to solve the issue! Thank you so much for your help!!! :grinning:

And I’ll remember your tip about borders for the future! :grinning: Thanks again!

1 Like