Trouble Eliminating Vertical Space Between Elements

I’m having trouble eliminating the space between the bottom of my header and hero image in the Tea Cozy project in the Web Dev Path.

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

the html

       <!--header section-->

        <div class="container">
            <div class="header">
                <div class=" logo">
                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="logo">
                </div>
                <div class=nav>
                    <ul>
                        <li><a href="#">Misson</a></li>
                        <li><a href="#">Featured Tea</a></li>
                        <li><a href="#">Locations</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end header section-->

        <!--main section-->

        <div class="main">
            <div class="hero-container">                
                    <div class="mission-head">  
                        <H2>Our Mission</H2>
                    </div>
                    <div class="mission-discription">  
                        <h4>Handpicked, Artisanally Currated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
                    </div>                   
            </div>

The css

html, body {
    font-family: "Nunito Sans", Helvetica, sans-serif;
    font-size: 22px;
    color:seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    border: 1px red solid;
}

container {
    display: block;
}




.header {
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;         
}
 
.logo img {
    height: 50px;
    float: left;
    padding-top: 9px;
    padding-left: 10px;     
}

ul {
    list-style: none;
    float: right;    
}

li {
    display: inline-block; 
    margin: 0;
    padding-right: 10px;      
}

a {
    text-decoration: underline;
    color: seashell;
}

.hero-container {    
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    height: 700px;
    width: 1200px;
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-size: cover;
    background-position: center;    
    margin: auto;
    border: 1px red solid;    
}

Any help is appreciated. Thanks!

2 Likes

Not needed. DIV is already a block level element by default.

LIkewise, the width is 100% by default so that property is not needed.

Images generally do not take padding, but margin. When setting a float, be sure to give the element a width property, as some user agents will depend upon it. The same will apply to the UL.

Not sure which one is the ‘hero’ image.

Can you please post a screenshot of your page (the full page, DIscourse will make it fit).

2 Likes

Hoping I’ve pasted the screenshot correctly.

2 Likes

We only really need to segment on the right. Point out where your issue is.

2 Likes

Here’s a better screenshot.

I just changed to a larger screen and the problem was resolved and now I have a different one. The large “hero” image should be right up against the header’s bottom border. When I changed to the bigger screen, that was resolved, but now it is off center, which is something I was struggling with before.

2 Likes

I believe everything we need is in the red-line that accompanies the project. Give it a close study and check your layout against it.

It was so long ago I did this I’ve forgotten most of what I learned at the time. However, if I could create the page to match the red-line, then someone younger, smarter and with a sharper mind can do it. Remember, this is a flexbox project, so make full use of it.

HInt: My code does not use any floats.

2 Likes