title: Media Query not taking format like it should
body: <p>I am designing a container on my site and for some reason, whenever my media query takes place, my code does not turn out like it should. Every where I put my code it works (jsfddle, snippet), but on site the bottom arrow is going inside of the blue container. </p>
  
  <p>Why is the blue down arrow where it needs to be in the snippet, but not my website?</p>
  
  <p>Please go here: <a href="http://optimumwebdesigns.com/discuss-project" rel="nofollow noreferrer">click here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow_box {
   position: relative;
   background: #88b7d5;
   border: 4px solid #c2e1f5;
    width: 100%;
    height: 400px;
  }
  .arrow_box:after, .arrow_box:before {
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
  }
  
  .arrow_box:after {
   border-color: rgba(136, 183, 213, 0);
   border-top-color: #88b7d5;
   border-width: 30px;
   margin-left: -30px;
  }
  .arrow_box:before {
   border-color: rgba(194, 225, 245, 0);
   border-top-color: #c2e1f5;
   border-width: 36px;
   margin-left: -36px;
  }
  #project-content-wrap {
    margin: 10% 5%;
  }
  #project-box-title1 {
    font-size: 1.1em;
    color: #FFF;
  }
  #project-box-title2 {
    font-size: 3.2em;
    color: #FFF;
    margin-top: 20px;
  }
  #project-box-description {
    font-size: 1.1em;
    color: #303030;
    margin-top: 40px;
    line-height: 1.6em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="arrow_box"&gt;
    &lt;div id="project-content-wrap"&gt;
      &lt;div id="project-box-title1"&gt;KICK START YOUR&lt;/div&gt;
      &lt;div id="project-box-title2"&gt;PROJECT&lt;/div&gt;
      &lt;div id="project-box-description"&gt;We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/7vd0I.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7vd0I.jpg" alt="enter image description here"></a></p>