Tea Cozy Question

Hi all,

I just completed the Tea Cozy project and was able to do most of it on my own. I had trouble with the heading section though, so I used the code below that I found online.

I don’t understand why this didn’t center the logo and the links. If the default for flex-containers is (justify-content: center), shouldn’t the logo and links have been centered. I get that the links would be right aligned within the nav box, but the box itself should be centered, right?

HTML (links removed)

<div id=“header” class=“flex-container”>
<img id=“logo” src=“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png”/>
<nav>
<span><a href="#banner">Mission</a></span>
<span><a href="#store">Featured Tea</a></span>
<span><a href="#locations">Locations</a></span>
</nav>
</div>

CSS:

.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#header {<
position: fixed;
top: 0;
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
background-color: black;
z-index: 1;
align-items: center;
}

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

When testing this, I found it did center it on my browser. Perhaps what is happening is that you are using fancy quotes, which the browser may not recognize as quotes. Perhaps try that, and see what happens then. If the problem persists, then I am sorry, but do not understand how you might fix it, as it works for me.

Just a spot of weirdness that looks out of place. That isn’t in your selector rule, is it?

Hmm… I’m wondering how I managed to miss that!

1 Like

No matter where we are in the learning curve, beginner, fledgling, wingling, hunter, we have correction bias. We are stuck on our own belief that we did nothing wrong.

Build in a detector for this, as you go, so it doesn’t become an obstacle.

3 Likes

I see what you mean! Good to note.

1 Like

No. Typo when I pasted. Sorry about that.

Also, (just because I know I’m probably gonna be using this forum quite often), is there a way to nest my html elements when I’m pasting them to this forum.

1 Like

Nesting? Do you mean like that?

<div id=“header” class=“flex-container”>
<img id=“logo” src=“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png”/>
    <nav>
        <span><a href="#banner">Mission</a></span>
        <span><a href="#store">Featured Tea</a></span>
        <span><a href="#locations">Locations</a></span>
    </nav>
</div>

use ``` code``` for multiple lines, and `code` for single lines - or the preformatted text option when typing your post

preformatted_text_option

1 Like

Thanks. I’m still not sure why the code isn’t centering the logo and nav boxes. I tried changing up the quotes, but that didn’t work.

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        #header {
            position: fixed;
            top: 0;
            height: 69px;
            width: 100%;
            border-bottom: 1px solid seashell;
            background-color: black;
            z-index: 1;
            align-items: center;
        }
        
        #logo {
            height: 50px;
            width: auto;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id="header" class="flex-container">
        <img id="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png/">
        <nav>
            <span><a href="#banner">Mission</a></span>
            <span><a href="#store">Featured Tea</a></span>
            <span><a href="#locations">Locations</a></span>
        </nav>
    </div>
</body>
</html>

I simply copied your code. Does that change anything? It could be for many reasons.

Do you mind posting your code again, or editing your opening post so it shows the proper code in the preformatted text version? I feel like I’m missing something trying to recreate your snippet, guessing it’s some HTML not showing due to the missing code tags.

  <div id='header' class='flex-container'>
            <img id='logo' src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png'/>
            <nav>
                <span><a href="#banner">Mission</a></span>
                <span><a href="#store">Featured Tea</a></span>
                <span><a href="#locations">Locations</a></span>
            </nav>
   </div>

.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#header {
position: fixed;
top: 0;
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
background-color: black;
z-index: 1;
align-items: center;
}

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

nav {
flex-grow: 1;
text-align: right;
}

nav span {
padding: 20px 10px;
margin: auto;
}

Thanks for posting the code again.

Now, if I get that right about the centering you want to do:

#header {
is missing a left: 0; to get rid of the white space to the left of it
}

#logo {
doesn’t need the margin-left (does it ?)
}

nav {
is missing a width, add width: 100%;
the text align should be text-align: center;
}

Does that produce the outcome you’ve been looking for?

Thank you for this. It did center the header boxes.

But I still don’t understand why they weren’t centered with the original code. Shouldn’t the (justify-content: center) rule in .flexcontainer have accomplished this?

It seemed to accomplish it for the other elements in the .flexcontainer class.