Flexbox, excess space between a nav element and an img element


#1

I am working on the "Tea Cozy" project from the "Getting more advanced with design" course in the "Web development" path. I'm fairly happy with the results at the moment, but I am having a problem with my attempt to use a media query to resize the header (and push the top div down to accommodate). For some reason, there is some extra space between the logo image and the nav menu once the width of the browser drops into the high 300's.

I would like the menu to continue getting closer to the logo until there are only a few pixels between them. I'm including my index.html and styles.css. Please note, it's a bit messy right now, having redundant classes and unnecessary ids, and that may be the problem. I don't know. Thank you in advance.

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Tea Cozy - Home</title>
    <link type="text/css" rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  </head>

  <body>

    <header>
        <img id="logo" src="images/img-tea-cozy-logo.png" alt="Tea Cozy logo" title="Tea Cozy">
        <nav id="nav-main" class="navigation">
            <ul>
                <li><a href="#mission" title="Mission">Mission</a></li>
                <li><a href="#featured-tea" title="Featured Tea">Featured Tea</a></li>
                <li><a href="#location" title="Location">Location</a></li>
            </ul>
        </nav>
    </header>
      
    <div id="mission" class="splash">
        <div class="crossbar">
            <h2 class="intro">Our Mission</h2>
            <h4 class="byline">Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
    
    <div id="featured-tea" class="offers">
        <h2 class="intro">Tea of the Month</h2>
        <h4 class="byline">What's Steeping at The Tea Cozy?</h4>
        <div class="flexy">
            <div class="card"><img src="images/img-berryblitz.jpg"><h4>Fall Berry Blitz Tea</h4></div>
            <div class="card"><img src="images/img-spiced-rum.jpg"><h4>Spiced Rum Tea</h4></div>
            <div class="card"><img src="images/img-donut.jpg"><h4>Seasonal Donuts</h4></div>
            <div class="card"><img src="images/img-myrtle-ave.jpg"><h4>Myrtle Ave Tea</h4></div>
            <div class="card"><img src="images/img-bedford-bizarre.jpg"><h4>Bedford Bazaar Tea</h4></div>
        </div>
    </div>
      
    <div id="location" class="splash"></div>

  </body>

</html>
html, body {
    background-color: black;
    width: 100%;
    height: 100%;
    font-family: "Helvetica", "Work Sans", sans-serif;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    padding 0;
    margin: 0;
}

header {
    min-height: 69px;
    border-bottom: 1px solid seashell;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: black;
    display: flex;
    text-align: right;
}

a {
    color: inherit;
}

#logo {
    height: 50px;
    width: auto;
    margin: 9.5px 10px;
}

nav {
    flex: 1 0 20%;
}

nav li {
    display: inline-block;
    list-style: none;
    text-decoration: underline;
    white-space: nowrap;
    padding: 0 0.333rem;
    margin-right: 10px;
}

.splash {
    margin-top: 69px;
    background-size: cover;
    height: 700px;
    display: flex;
}

#mission.splash {
    background-image: url('images/img-mission-background.jpg');
}

#location.splash {
    background-image: url('images/img-locations-background.jpg')
}

.splash .crossbar {
    text-align: center;
    margin: auto 0;
    background-color: black;
    display: block;
    justify-content: center;
    flex: auto;
    padding: 0 auto;
}

.intro, .byline {
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
}

.offers{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
    margin: 45px auto;
}

.flexy {
    display: flex;
    min-width: 50%;
    margin: 10px auto;
    justify-content: center;
    align-content: center;
    flex-flow: row wrap;
}

.flexy .card {
    width: 300px;
    padding: 10px;
}

.flexy .card img {
    max-width: 100%;
}

.flexy .card h4{
    text-align: center;
    margin: 10px auto;
}

@media only screen and (max-width: 608px) {
    #logo {
        height: 50px;
        width: auto;
        margin: 35px 10px;
    }
    
    .splash {
        margin-top: 120px;
    }
    
    nav {
        max-width: 10rem;
    }
    
    header {
        min-height: 120px;
        justify-content: center;
    }
}

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.