I'm setting media queries for tablet-size screens and my nav bar, header logo and top section don't seem to want to stack properly. If I fix the position of the nav I'm losing the section heading or if I put the nav position as static the nav bar is trying to hide behind it. So, when I reduce to 680px or below I get this at the top of my screen -

[![position static - nav](https://i.stack.imgur.com/Fx7Ao.png)](https://i.stack.imgur.com/Fx7Ao.png)

Or this -

[![position fixed - nav ](https://i.stack.imgur.com/JZBSW.png)](https://i.stack.imgur.com/JZBSW.png)

It all stacks fine at 480px and below so not sure what I'm doing wrong. Here are my media queries -

```css
  @media screen and (max-width: 680px) {

        nav {

            float: none;
            text-align: center;
            padding-bottom: 10px;
            padding-top: 10px;

        }

        nav a {
        display: block;
        border-bottom: 0;

        } 

        #logo {

        height: auto;

      }

      #logo img {

        width: 200px;
        height: 100px;
        position: relative;
        top: 0;
        left: 21%;
      }

        section {
            float: none;
            height: auto;
        }
    }

    @media screen and (max-width: 480px) {

        body {
        max-width: 500px;
    }

      header {

        height: auto;

      }

      nav {

        text-align: center;
        padding-bottom: 10px;
        padding-top: 10px;
        position: static;

      }

      nav a {
        display: block;
        border-bottom: 0;

      } 

      nav a:hover {
         background-color: rgba(0,0,0,0.6);
         color: #fff;
      }

      #logo {

        height: auto;

      }

      #logo img {

        width: 200px;
        height: 100px;
        position: relative;
        top: 0;
        left: 21%;
      }

      section {
        float: none;
        height: auto;
        font-size: 20px;
      }
```

```html
    <header>
         <div id="logo"> <img src="images/havoc_logo.png"> </div>
      <nav>
        <a href="#logo">Home</a>
        <a href="#whatwedo">What we do</a>
        <a href="#whoweare">Who we are</a>
        <a href="#partners">Who we work with</a>
        <a href="#contact">Say hello</a>
        <a href="Blog">Blog</a>
      </nav>

    </header>

      <section id="whatwedo">
              <div class="container-fluid">
                <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1>
                    <div class="cols">
                          <div class="row no-gutters">
                                <div class="col-md-3">
                                    <h2>ADVERTISING</h2>
                                    <img src="images/advertising.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>    
                                <div class="col-md-3">  
                                    <h2>GRAPHIC DESIGN</h2>
                                    <img src="images/graphic_design.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>
                                <div class="col-md-3">  
                                    <h2>BRAND IDENTITY</h2>
                                    <img src="images/brand_identity.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>
                                <div class="col-md-3">      
                                    <h2>BRAND GUIDELINES</h2>
                                    <img src="images/beard.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>    

                          </div>
                          <div class="row no-gutters">
                                <div class="col-md-3">
                                    <h2>PRINT MANAGEMENT</h2>
                                    <img src="images/print.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>    
                                <div class="col-md-3">  
                                    <h2>CREATIVE DIRECTION</h2>
                                    <img src="images/creative_direction.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>
                                <div class="col-md-3">
                                    <h2>EDITORIAL DESIGN</h2>
                                    <img src="images/ed_design.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>    
                                <div class="col-md-3">
                                    <h2>AND LOTS OF OTHER STUFF</h2>
                                    <img src="images/other_stuff.jpg" class="image" style="width: 100%; height: 300px;">
                                    <div class="overlay">
                                        <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
                                    </div>  
                                </div>    

                            </div>
                    </div>
             </div>         

        </section>
```

Any help appreciated.