Tea Cozy project simple header code that works

Hi there fellow coders! :grinning:

I spent all morning figuring out how to code the header for the Tea Cozy project correctly. I finally figured it out so thought I’d share it. I’ve been looking at other people’s codes, which do work, but they sometimes seem a bit complicated or they don’t use Flexbox (which is preferable). So in case you want to have (what I think is) pretty clear & simple code, have a look below. :wink:

I did have one questions which someone might be able to answer? I currently added margin: 0 10px; for my navigation list items so there is a bit more space. I tried justify-content: space-between but that doesn’t change anything. I feel like there is a better way to do this (especially seeing there was no margin specified in the provided design doc).

1 Like

Hi

this is what actually moves your nav items to the right:

.logo {
  height: 50px;
  margin-right: auto; <--- this
  margin-left: 10px;
}

this part does nothing on my screen, could it be redundant?

.navigation {
  list-style: none;
  padding: 0;
  justify-content: flex-end; <--- this
}

Your HTML has two lonely closing div tags that are not needed, also the indentation looks a bit off, this is how I would put it instead:

<div class="container">
  <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
  <ul class="navigation">
    <a href="#mission"><li>Mission</li></a>
    <a href="#featured"><li>Featured Tea</li></a>
    <a href="#locations"><li>Locations</li></a>
  </ul>
</div>

Question: why is there a html selector in the CSS? Is that there by default?

Other than that, posting your code in preformatted text helps us rebuild or iterate or debug. At least those who still rely on trial and error, like myself :slight_smile:

Thank you so much! My solution was to space everything with hidden text. It works, but is entirely unacceptable