Tea Cozy Project Help Needed

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

I’m having some issues building the Tea Cozy website, and I can’t seem to figure out what I’ve done wrong. I’ve been going back through the lessons and looking at what other people did, but I still can’t seem to figure out how to fix my code. Can anyone help?

  1. For some reason I can’t get the navigation bar to rest along the top of the window, it leaves a weird gap between the top of the bar and the top of the window.

  2. I can’t seem to figure out how to get the background image to show up behind the mission statement header.

  3. I’m having trouble getting space between the black location boxes no matter how much of a margin I add.

<!DOCTYPE html>
<html>
<head>
  <link href ="Stylesheet.css" type="text/css" rel="stylesheet">
</head>

  <body>
    <div id="menu">
      <img src = "images/img-tea-cozy-logo.png"/>
        <nav>
          <a class="headerguide"href="#">Mission</a>           
          <a class="headerguide"href="#">Featured Tea</a>
          <a class="headerguide"href="#">Locations</a>
          </nav>
    </div>

    <div id = “banner”>
       <h2>Our Mission</h2>
       <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
    
    <div id = "monthlyTea">
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
      <div class = "images">
        <div class = "berryBlitz">
          <img src = "images/img-berryblitz.jpg"/>
          <h4>Fall Berry Blitz Tea</h4>
        </div>
        <div class = "spicedRum">
          <img src = "images/img-spiced-rum.jpg"/>
          <h4>Spiced Rum Tea</h4>
        </div>
        <div class = "donuts">
          <img src = "images/img-donut.jpg"/>
          <h4>Seasonal Donuts</h4>
        </div>
        <div class = "myrtleAve">
          <img src = "images/img-myrtle-ave.jpg"/>
          <h4>Myrtle Ave Tea</h4>
        </div>
        <div class = "bedfordBizarre">
          <img src = "images/img-bedford-bizarre.jpg"/>
          <h4>Bedford Bizarre Tea</h4>
        </div>
      </div>
    </div>
    
    <div id = "locations">
      <h2>Locations</h2>
      <div class = "boxes">
        <div>
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </div>
        <div>
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </div>
        <div>
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </div>
      </div>
    </div>
   
    <div id = "footer">
      <h2>The Tea Cozy</h2>
      <h5>contact@theteacozy.com</h5>
      <h5>917-555-8904</h5>
    </div>

    <div id = "copyright">
      <h5>copyright The Tea Cozy 2017</h5>
    </div>
  </body>

</html>
html body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    margin-top: 0;
}

#menu {
    border-bottom: 1px solid seashell;
    position: fixed;
    height: 69px;
    width: 100%;
    background-color: black; 
    margin-bottom: 20px;  
    margin-top: 0;  
    z-index: 1;   
}

nav a {
    text-decoration: underline;
    float: right; 
    margin-right: 20px;
    margin-top: 20px;
    color: seashell;
}

#menu img {
    height: 50px;
    margin-left: 10px;
    float: left;
}


#banner {
    background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 700px;
    display: flex;
    align-items: center;
}

#monthlyTea {
    width: 90%;
    align-self: center;
    display: inline-block;
    text-align: center;
}

.images {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.images img {
    width: 300px;
    height: 200px;
}

#locations {
    background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
    padding-top: 10px;
}

.boxes {
    width: 1100px;
    margin: auto;
    opacity: 1;
    background-color: black;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

#footer {
    height: 200px;
}

#copyright {
    padding-left: 20px;
    text-align: left;
}
1 Like

Possible solution to the fixed header problem:
add

top: 0;
left: 0;

to your #menu css

and a margin-top of the size of your header to the body selector, no HTML selector is needed.

A fixed element will be taken out of normal flow so the element following will slip underneath. Defeat this with margin-top set accordingly so your first page element is not hidden under the header.

Thank you guys! I figured out how to fix the rest of my issues after fixing the menu by adding “top: 0; left: 0” to my menu css. Here’s what I ended up doing in case anyone else runs into the same issues: https://github.com/NicoleNootbaar/TeaCozyProject

2 Likes