TeaCozy help. Struggling with wrapping something in a div

Hey guys. First time really doing something with NO direction besides for this spec sheet spec sheet. I’m having an issue with wrapping a div in a div and positioning it properly. For example:

  1. the background image mission statement won’t center on the image for some reason, even though it’s wrapped in the same div.

and 2) The background image, although it is 700x1200 it doesn’t take up the same amount of space on the spec sheet. I’m not sure what I’m missing here. I’d really appreciate some guidance.

and 3) I tried to make a container for the body itself but it would go through the header and stop right by the background image even though I wrapped everything in it

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta charset="UTF-8">
    <link rel="stylesheet" href="resources/css/style.css">
    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>TeaCozy</title>
</head>
<body>


                            <!--Header-->

    <header>
         <div class="header">
            
                <ul class="navigation">
                    <li><a href="#mission"> Mission</a></li>
                   <li> <a href="#featured">Featured Tea</a></li>
                    <li><a href="#locations">Locations</a></li>
                </ul>
                    <img src="resources/images/img-tea-cozy-logo.png" class="logo">
            </div>
    </header>

            <!--Main Container-->
    
        <div class="background">
            <div class="mission-statement">
                <h2>Our Mission</h2>
                <h4> Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    
   

CSS

html {
    font-size: 22px;
    height: 100%;
  }

  * {
   box-sizing: border-box;
   font-family: "Helvetica", sans-serif;
   color: seashell;
   margin: 0;
   padding: 0;
   overflow: hidden;
  }

 

  body {

    background-color: black;
    
  }
                             /*!-Header-->*/
  .header {
    height: 3.136rem;
    position: fixed;
    display: block;
    width: 100%;
    z-index: 1;
    background-color: black;
    overflow: hidden;
    
    
  }
 
  .logo {
    height: 100%;
    padding: 10px;
    
    
  }
 
  .navigation {
    display: flex;
    width: 100%;
    color: seashell;
    height: 100%;
    margin:0 auto;
    position: absolute;
    justify-content: flex-end;
    text-align: center;
    border-bottom: 1px solid seashell;

  }

  ul.navigation {

    display: flex;
    list-style: none;
   align-items: center;
   padding-left: 10px;
   padding-right: 10px;
  
  }

  li.navigation {

    padding-left: 10px;
    padding-right: 10px;
  }

  a {

    padding-left: 10px;
    padding-right: 10px;
  }
  


                        /*!--Main Container-->*/
  .background {
    height: 700px;
    width: 1200px;
    background-image: url("C:/Code Academy Projects/TeaCozy/resources/images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: 70px;
    
   
    
    
  }

  .mission-statement {
    background-color: black;
    width: 1200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 1;
    position: absolute;
  }
h2 {

    text-align: center;
}
h4 {
    padding-top: 20px;
    padding-left: 80px;
}
  

  1. You have position absolute on the mission statement, if you are trying to align blocks using flex then it is best to leave the position as default static.

  2. Sometimes the specs are made for smaller screens. If the image is supposed to take up the whole width try shrinking your browser to match that width. But remember Web Design is all about responsivity, so make it match but also make sure it is able to adapt to smaller and larger screen sizes.

  3. I wouldn’t recommend making a container that wraps the whole body, rather make a class called container and set the max-width and other universal elements in that. Then just wrap each section inside a div and add the container class, or add the container class where you feel it is necessary.

Hope this helps.

thanks so much for responding!

For some reason changing it to static didn’t help, but setting the margin-top: 300px did it. It’s confusing when to use margin and when not. Is it bad practice to use margin to center things?

Hi, there!

You currently are using “align-items,” I think you will find what you are looking for with “justify-content”

As Joe mentioned, specs are sometimes created for smaller screens. Looking at the spec, it’s probably safe to say it would look the same on a laptop. But if you’re using a larger monitor, then of course it will look smaller. I do not remember if you will have learned about responsiveness yes, but once you do it will be easier to understand fluid design.

I suppose I would need more context about what it is you were trying with this.

The justify-content property should help with this. But it is super common to use margins to center elements. As you work with more projects, you will get more opportunities to see this in practice.

Hey, how are you? Your explanation makes a lot of sense, actually. I appreciate that.

So for some reason, every problem I consistently have is header related. I don’t know what’s going on. With the code I;m having, it shouldn’t be screwing up the header and separating everything… I’ll paste my updated code again and show you what I mean.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta charset="UTF-8">
    <link rel="stylesheet" href="resources/css/style.css">
    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>TeaCozy</title>
</head>
<body>


                            <!--Header-->

    <header>
            
                <nav>
                    <img src="resources/images/img-tea-cozy-logo.png" class="logo">
                <ul class="nav-content">
                    <li><a href="#mission"> Mission</a></li>
                   <li> <a href="#featured">Featured Tea</a></li>
                    <li><a href="#locations">Locations</a></li>
                </ul>
                </nav>
                

    </header>

            <!--Main-->
    
        <div class="background">
            <div class="mission-statement">
                <h2>Our Mission</h2>
                <h4> Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
                    <!--Selection-->
        <div class="shop">
            <h1> Tea of the Month</h1>
            <h4> What's Steeping at The Tea Cozy?</h4>
            <div class="selection">
                <img src="resources/images/img-berryblitz.jpg">
                <h4> Fall Berry Blitz Tea</h4>
            </div>
            <div class="selection">
                <img src="resources/images/img-spiced-rum.jpg">
                <h4></h4>
            </div>
            <div class="selection">
                <img src="resources/images/img-donut.jpg">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="selection">
                <img src="resources/images/img-myrtle-ave.jpg">
                <h4>Myrtle Ave</h4>
            </div>
            <div class="selection">
                <img src="resources/images/img-bedford-bizarre.jpg">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
   
                       












</body>
</html>

CSS

html {
    font-size: 22px;
    
  }

  * {
   box-sizing: border-box;
   font-family: "Helvetica", sans-serif;
   color: seashell;
   margin: 0;
   padding: 0;
  
  }

 

  body {

    background-color: black;
   
  }
                             /*!-Header-->*/
    .header {
      height: 69px;
     
      display: block;
      width: 100%;
      z-index: 100;
      background-color: black;
      overflow: hidden;
    
    
  }
 
  .logo {
    
    height: 50px;
    width: auto;
  }
 nav {
  position: fixed;
  width: 100%;
  background-color: black;

 }
  .nav-content {
    display: flex;
    color: seashell;
    margin:0 auto;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid seashell;
    overflow: hidden;
    list-style: none;
   padding-left: 10px;
   padding-right: 10px;
   height: 69px;
  
  }

  li.navigation {

    padding-left: 10px;
    padding-right: 10px;
  }

  a {

    padding-left: 10px;
    padding-right: 10px;
  }
  


                               /*--Main-->*/
  .background {
    height: 700px;
    width: 1200px;
    background-image: url("C:/Code Academy Projects/TeaCozy/resources/images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: 70px;
    
   
    
    
  }

  .mission-statement {
    background-color: black;
    width: 1200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 300px;
  }
.mission-statement h2 {
    padding-top: 10px;
    text-align: center;
}
.mission-statement h4 {
    padding: 10px 0px;
    
}
  
        /*--Selection--*/

The problem all started when I took overflow out of the body and then saw the header floating. Now the overflow won’t end horizontally and I’m just kind of confused here. What’s going on…?

Hi, so I have managed to isolate the issue by pulling your code locally and having a good look.

You have position fixed on your nav this removes the nav from the normal flow of the website and fixes it in place. This means any height or padding is ignored for normal flow of the site. This is what lead to the issue, the CSS is looking for the next element inside the normal flow, this being your background div, which adds a margin-top. As you can see in the screenshot below I have highlighted the area of the background div, the margin-top s pushing the nav bar down as well as the background div.

There are few solutions, add a ‘top:0;’ to the nav fixing it to the top of your page, you could try using sticky instead of fixed for the header, or you remove the margin-top from the background.

Also to ensure that your header stay above everything else as you scroll down make sure to add the index:2;. Index moves elements backwards and forwards, allowing you to choose which elements will appear on top of others.