Tea Cozy problem

Get Help CSS
#1

Hi guys!

I am curently on the Tea Cozy project, this is not finish yet but a big black square you can see on the picture and i don’t know where this come from can you help me ?

image
image1899×881 108 KB 

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>
    <nav id="nav">
      <img id="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
      <ul>
      <li class="navbar">Mission</li>
      <li class="navbar">Featured Tea</li>
      <li class="navbar">Locations</li>
      </ul>
    </nav>
      <section id="mission">
        <div class="mission-container">
          <div class="mission">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally, Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>
      </section>
       <section >
         <div class="the-du-mois" >
          <h2>Tea of The Month</h2>
          <h4>What's Steeping at The Tea Cozy?</h4>
         </div>
          <div class="photo-container">
           <div class="photo">
             <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/> 
           <p>Fall Berry Blitz Tea</p>
            </div>
         <div class="photo">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
           <p>Spiced Rum Tea</p>
            </div>
          <div class="photo">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
           <p>Seasonal Donuts</p> 
           </div>
          <div class="photo">
             <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
           <p>Myrtle Ave Tea</p>
           </div>
          <div class="photo">
             <img  src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
           <p>Bedford Bizzare Tea</p>
           </div>
         </div>
       </section>
        <section id="location">
          <h2>Locations</h2>
          <div id="downtown">
            <h3>Downtown</h3>
              <p>
              384 West 4th St Suite 108 Portland, Maine
              </p>
          </div>
          <div id="East Bayside">
            <h3>East Bayside</h3>
            <p>
              3433 Phiserman's Avenue (Nortwest Corner) Portland, Maine        </p>
          </div>
            <div id="Oakdale">
              <h3>Oakdale</h3>
              <p>
                515 Crescent Avenue Second Floor Portland, Maine
              </p>
            </div>   
        </section>
          <div id="contact">
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
          </div>
            <footer>
              <p> copyright The Tea Cozy 2017</p>
            </footer>
  </body>
</html>

html{
    font-family: 'Helvetica';
    color: #FFF5EE;
    background-color: black;
    }
    
  .navbar{
     display: inline;
     text-decoration: underline;
     justify-content: flex-end;
     float: right;
     height: 100%;
     padding: 0px 20px;
  
   } 
  #logo {
    height: 50px;
    padding-left: 10px;
    float: left;
  }
  nav{
    position: fixed;
    border-bottom: 1px solid seashell;
    height: 69px;
    width: 100%;
    background-color: black;
    top: 0px;
    display: blocked;
  }
  
  .mission-container{
    background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg');
    height:700px;
    max-width: 1200px;
    background-position: center;
   display: flex;
    
  }
  .mission{
   margin: auto;
    vertical-align: center;
    background-color: black;
    text-align: center;
    width: 100%;
  }
  
  .photo img{
    height: 200px;
    width: 300px;
    padding: 10px 10px;
    
  }
  .photo-container{
    display:inline-flex;
    max-width:1000px;
    height:auto;
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    }
  .the-du-mois{
    text-align: center;
  }
#2

Hey, @schmidtarnaud3716297,

You’re seeing the black area because you’ve set the max-width property for divs with the mission-container class. Remove that or comment it out and the div should span the entire page.

Hope that helps!

1 Like
#3

Hey, @davbyron
Thank you for your reply, but sadly it doesn’t work :confused:

#4

Hmm, interesting. It worked for me on my machine…

Your CSS now looks like this, correct?

.mission-container{
  background-image: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg');
  height:700px;
  /* max-width: 1200px; */
  background-position: center;
  display: flex;
}
#5

My bad, it works ! I didn’t understand what you mean… but can you explain how this worls please ?

#6

No worries! :slight_smile:

The max-width property does exactly as the name implies: it sets the maximum width that the container can be.

Your screen is likely larger than 1200px wide (you can check here), so that’s why your .mission-container div looked squished.

Take a look at MDN’s specifications for max-width here. They have some nice interactivity that makes the property easier to understand.

Hope this helps!

1 Like
#7

Hey did you set the margin of your .mission-contatiner div to 0 auto?