html element not being pushed down on media query

Question

I'm sure this question has been answered before but most questions say "absolute" positioning is the culprit. I've tried adjusting the positioning, and can't figure out why the P element is not being pushed down.

In my real project, it's the commented out "bannerArea" that needs to be pushed down on the media query, but the background area covers up my navigation menu.

http://codepen.io/fastpenguin91/pen/BLrZBA?editors=1100

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Answer 1

It's quite simple. Add float and width to the parent:

.test {
    height: 50px;
    background: pink;
    float: left;
    width: 100%;
}

Float and width are making the element related to the other elements and therefore it is pushed below the banner.