Tea cozy Mission div Max-width dosent work

Link: The Tea Cozy

<div class="mission">
            <div id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Traide, Organic Tea</h4>
            </div>
        </div>
.mission{
    display: flex;
    align-items: center;
    height: 700px;
    background-image: url("/resources/img/img-mission-background.jpg");
    max-width: 1200px;
}

#mission{
    text-align: center;
    background: black;
    padding: 10px;
}

So I’m trying to make the div with class .mission contract and expand to a maximum of 1200px. the problem is that it stops at around 1000 px and i don’t understand what i have missed.

It could be the fact that height is set to 700 px.
Since it has a picture, in order for it to expand to 1200, it may need to expand upwards.

Out of curiosity, how do you know how far it expanded to?
Did you compare it to an element that was set at 1200 px?

The picture dosen’t decide the size of the container.
I checked with the dev tools in Chrome :slight_smile:

I just typed out your code, and compared it with a bar that I set to be 1200px long, and they are both the exact same length.

The only difference in my code was that I do not have access to you picture, so I had to use a border to tell were the edges were.

What are you comparing your image to, in order to tell that it is stopping at about 1000 px?

I just resize the window.

That is not always a accurate way to measure, 1200 px will not always go across the entire screen.
I would recommend doing something like this at the bottom of your code and see if they are the same length:

<div class="bar">
</div>

Then style it with CSS:

.bar {
    height: 20px;
    width: 1200px;
    border: 2px solid green;
}

This should make a green bar at the bottom of your page, you can then see if it is the same length as your picture.

Done and they aren’t the same

If it is not caused by the picture, perhaps it has to do with something farther back in your code, like a parent <div> element that is set to a width of 1000px.

I don’t have any other divs with hard coded widths before it.
:confused:

Could you post your full code? Perhaps it is something else.

SURE!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
    <title>Tea Cozy</title>
</head>
<body>
    <header>
        <div >
            <img id="logo" src="./resources/img/img-tea-cozy-logo.png" alt="">
        </div>
        <nav>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
    </header>
    <br>
    <div class="container">


        <div class="mission">
            <div class="space"></div>
            <div id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Traide, Organic Tea</h4>
            </div>
            <div class="space"></div>
        </div>

        <div class="tea">
            <div id="tea">
                <h2>Tea of the Month</h2>
                <h4>What's Steeping at The Tea Cozy </h4>
            </div>
            <div class="posts">
                <div><img class="month-img" src="resources\img\img-berryblitz.jpg" alt="">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div><img class="month-img" src="resources\img\img-spiced-rum.jpg" alt="">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div><img class="month-img" src="resources\img\img-donut.jpg" alt="">
                    <h4>Sesonal Donuts</h4>
                </div>
                <div><img class="month-img" src="resources\img\img-donut.jpg" alt="">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div><img class="month-img" src="resources\img\img-bedford-bizarre.jpg" alt="">
                    <h4>Bedford Bizarre Tea</h4>
                </div>  
            </div>
        </div>

        <div class="locations-container">
            <div id="locations">
                <h2>Locations</h2>
            </div>
            <div class="locations">
                <div>
                    <h3>Downtown</h3>
                    <h4>384 West 4th St</h4>
                    <h4>Suite 108</h4>
                    <h4>Portland, Maine</h4>
                </div>
                <div>
                    <h3>East Bayside</h3>
                    <h4>3433 Phisherman's Avenue</h4>
                    <h4>(Northwest Corner)</h4>
                    <h4>Portland, Maine</h4>
                </div>
                <div>
                    <h3>Oakdale</h3>
                    <h4>515 Cresent Avenue</h4>
                    <h4>Second Floor</h4>
                    <h4>Portland, Maine</h4>
                </div>
            </div>


        </div>
    </div>




    <footer>
            <div class="contact">
                <h2>The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>971-555-9804</h5>
            </div>
            <div class="copyright">
                <h5>copyright The Tea Cozy 2017</h5>
            </div>
    </footer>
    
</body>
</html>
body{
    background-color: black;
    font-family: Helvetica;
    color: seashell;
    font-size: 22px;
    opacity: 0.7;
}

header{
    background: black;
    width: 100%;
    height: 69px;
    border-bottom: 1px solid seashell;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    
}

nav li{
    list-style: none;
    text-decoration: underline;
    display: inline-block;
}

#logo{
    height: 50px;
    margin-left: 10px;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.mission{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center ;
    height: 700px;
    max-width: 1200px;
    background-image: url("/resources/img/img-mission-background.jpg");
    background-position: center ;
    background-size: cover;
}

#mission{
    flex-direction: column;
    text-align: center;
    background: black;
    padding: 10px 50px;
}

.posts{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

.posts div{
    margin: 10px;
}

.tea{
    margin-top: 50px;
    max-width: 1000px;
    text-align: center;

}

.month-img{
    height: 200px;
    width: 300px;
    margin-bottom: 10px;
}

.locations-container{
    margin-top: 50px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("/resources/img/img-locations-background.jpg");
    max-width: 1200px;
}

#locations{
    text-align: center;
}

.locations{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    

}

.locations div{    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;

    width: 300px;
    background-color: #000000;
    opacity: 1;
    margin: 15px 20px;

}


footer{
    text-align: center;
}

.contact{
    margin-top: 50px;
    height: 200px;

}

.copyright{
    display: flex;
    text-align: left;
    margin: 20px;
}

here you go :slight_smile:

It is being caused by something inherited from <div class="container">.
I am not certain what yet but I am still experimenting.
You can test this by removing the container class. If you take that away it should be able to expand to the full size.

1 Like

It is because of the align-items: center; in <div class="container">

I believe since it is aligning all elements inside of it to the center than there is no reason for the picture to expand farther, since the elements it contains already fit inside of it.

I don’t think it’s the img. If i try to remove the picture and put a color instead it dosen’t change.

I don’t believe it is because of the img. It is because of the align-items: center; in your <div class="container">

but how would you els center the content? div body div?

You can build a grid: display: grid; with a single column and five rows, in .mission

Then have #mission span row 3:

.mission {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  height: 700px;
  max-width: 1200px;
}

#mission {
  grid-row-start: 3;
  grid-row-end: 4;
  text-align: center;
  background: black;
  padding: 10px 50px;
  max-width: 1200px;
}

I found the problem. turns out i forgot to set the margin to auto. Now everything works.
Thank you for the help :slight_smile:

If you don’t mind me asking, how did you user margin: auto; to solve the problem?
I had tried that a number of times, before posting a my last reply, and it did not work.