Project - Tea Cozy flexbox layout: Why can't i align the nav bar link elements and footer?

Project link: https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

So, I am trying to align the notional navigation items to the right of the navbar, and I am trying to align the copyright text in the footer to the left as per the design spec. I’m using a general flexbox but trying to use inline-block to align the footers, I have tried to use flex with justify-content and align-items properties, as well as justiffy and align-self with no luck.

If you could tell me what I’m missing that would be a big help before I pull all my hair out.

<!DOCTYPE html>
<html>
    <head>
        <link href='style.css' rel='stylesheet'>
    </head>
    <body>
        <!-- Nav bar contaners and elements-->
        <div class='navbar'>
            <img id='logo' src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt='logo'>
            <div class='navlinks'>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
            </div>
        </div>

        <!--Mission section-->
        <div class='missioncontainer'>
            <div class='textwrap_mission'>
            <h2>Our Mission</h2>
            <h4>Hand picked, Artisnally curated, Free range, Sustainable, Small Batch, Fairtrade, Organic tea.</h4>
            </div>
        </div>

        <!--Tea of the month section with images-->
        <div id='store'>
            <h2>Tea of the Month</h2>
            <h4>Whats steeping at tea cozy?</h4>
        <div class='tea_section'>
            <div class='picwrap'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg' alt='bedford'>
            <span>Bedford Bizzare</span>
            </div>
            <div class='picwrap'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg' alt='berry'>
            <span>Berry Blitz</span>
            </div>
            <div class='picwrap'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg' alt='donuts'>
            <span>Donuts</span>
            </div>
            <div class='picwrap'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg' alt='myrtle'>
            <span>Myrtle Avenue</span>
            </div>
            <div class='picwrap'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg' alt='rum'>
            <span>Spiced Rum</span>
            </div>
        </div>
        </div>

        <!--Locations section-->
        <div id='locations'>
            <div class='location_box' id=location_one>
                <h3>Downtown</h3>
                <span>Address line 1</span>
                <span>Adress line 2</span>
                <span>Adress line 3</span>
            </div>
            <div class='location_box' id=location_two>
                <h3>Location 2</h3>
                <span>Address line 1</span>
                <span>Address line 2</span>
                <span>Address line 3</span>
            </div>
            <div class='location_box' id='location_three'>
                    <h3>Location 3</h3>
                    <span>Address line 1</span>
                    <span>Address line 2</span>
                    <span>Address line 3</span>
            </div>
        </div>

        <!--Contact section-->
        <div id='contact'>
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>01234567</h5>
        </div>

        <!--Footer-->
        <footer id='footer'>
            <span>Copyright the Tea Cozy 2019</span>
        </footer>


    </body>

</html>
* {
    margin: 0;
    padding: 0;
}
/* Universal styling */

html, body {
    background-color: black;
    color: seashell;
    font-family: helvetica, sans-serif;
    font-size: 22px;
    opacity: 0.9;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Flex containers */

.navbar {
    display: inline-flex;
    width: 100%;
    height: 69px;
    border-bottom: 1px seashell solid;
}

.missioncontainer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 700px;
    width: 1200px;
    background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.tea_section {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 1000px;
}

#store {
    margin-top: 50px;
}

#locations {
    display: flex;
    flex-direction: row;
    background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    width: 1200px;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

#contact {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
}

#footer {
    display: inline-block;
    text-align: left;
}


/* Child elements - Nav */

#logo {
    height: 50px;
    margin-left: 10px;
    
}

li {
    display: inline-block;
}

/* Child elements - Mission */

.textwrap_mission {
    background-color: black;
    width: 100%;
    line-height: 50px;
}

/* Child elements - Store */

#store img {
    height: 200px;
    width: 300px;
    margin-bottom: 10px;
}

.picwrap {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 10px 10px;
}

#store h2, h4 {
    line-height: 50px;
}

/* Child elements - Locations */

.location_box {
    background-color: black;
    display: flex;
    flex-direction: column;
    width: 300px;
    margin-top: 15px;
    line-height: 75px;
}

#location_one {
    margin-right: 20px;
}

#location_two {
    margin-left: 20px;
    margin-right: 20px;
}

#location_three {
    margin-left: 20px;
}

Thanks guys :slight_smile:

Here you are specifying center alignment that’s why everything is center.

Hey, thanks for your response. I want the containers to be centrally aligned, how can i achieve this if i remove that from the body?

This causing the footer not to align as you want with current styling.

this will prevent .navlinks from being aligned right with current styling