Tea Cozy Project CSS: Nav Bar

Language Help CSS
1

Hello, can anyone help me?

I got stucked and don’t know why the H2 and H4 stick to the nav bar.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
</head>
  <link rel="stylesheet" href="style.css" type="text/css" />
<body>
  <nav>
     <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*u11ka3*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTgwNjQ3My40Ny4xLjE2Nzk4MDY1NTQuNTcuMC4w" alt="logo">
      <ul class="nav">
        <li><a href="#"</a>Mission</a></li>
        <li><a href="#"</a>Featured Tea</li>
        <li><a href="#"</a>Locations</li>
      </ul>
         </nav>
 
  <div class="hero">
        <div class="banner">
      <h2>Our Mission</h2>
      <h4>Handpicked, Artisanally Curated, Free Range, Sustanable, Tea</h4>
    </div>
    </div>
      </body>
      </html>```

CSS
  • {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color:black;
    margin: 0;
    opacity: 0.9;
    }
    .logo{
    padding:10px;
    height:50px;
    }

nav {
display: flex;
position: fixed;
height: 69px;
justify-content: space-between;
align-items: center;
width: 100%;
}

nav ul {
position: absolute;
justify-content: flex-end;
right:0;
display:flex;

}

nav li {
list-style: none;
text-decoration: underline;
margin: 0 20px;

.hero{
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg”);
background-repeat: no-repeat;
background-position: center;
width: auto;
max-width: 1200px;
height: 700px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 69px;
}
.banner{
background-color: black;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0.8;
}

2

CSS

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px; 
    color: seashell;
    background-color:black;
        margin: 0;
    opacity: 0.9;
}
.logo{
  padding:10px;
  height:50px;
   }

nav {
    display: flex;
    position: fixed;
        height: 69px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

nav ul {
  position: absolute;
  justify-content: flex-end;
  right:0;
  display:flex;
  
}

nav li {
  list-style: none;
  text-decoration: underline;
  margin: 0 20px;

.hero{
     background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    max-width: 1200px;
    height: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 69px;
}
.banner{
  background-color: black;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0.8;
}
3

Hi, there!

So, first I encourage you to look at your HTML and make sure that every element is formatted correctly—same for your CSS. Now, to help you with your problem, I am going to answer the why is this happening instead of giving the solution outright because this is an important concept to understand.

If we go back to the lesson with the box-model, we know that padding is the space between the border and the content and margin is the space outside the border between other elements. Having padding-top on your banner is going to create space within the banner at the top of its box. Instead, you will want to use margin-top.

But after applying margin-top, you may notice that your header is still “attached” to the banner. Why is this? Well, if we still refer to the lesson on the box-model, we know that margins collapse. So, in this case, the banner’s margin-top would collapse with the body’s margin-top. Now, why is this relevant? Looking at your nav, it is fixed, but its positioning has not been defined. There are certain properties that have an initial value of auto, which will attempt to position the nav where it would be if it were still within the document flow (at the top of the body) BUT, because of collapsing margins, the body has a margin-top of 69px which moves the header down 69px.

Now, from what you know, how can you position a fixed or absolute element at the top of its containing parent element?

4

Hello!

Thanks for your reply, appreciate it!

I believe is the below should be adjusted, right?

Please let me know if I still missed out.

5

Yep! You just want to make sure that elements have the proper closing tags. :slight_smile: