title: CSS elements bleeding into eachother
body: <p>There's one very big problem I'm having with my CSS:</p>
  
  <p><b>The Problem:</b> The text is bleeding into the header element, which is fixed and is supposed to overlap like a navigation bar should, particluarly observed with the @media rule "only screen and (min-width: 320px) and (max-width:568px)"</p>
  
  <p><img src="https://i.stack.imgur.com/W1xT5.png" alt="enter image description here"></p>
  
  <p>I want it to neatly tuck under the element, that I've set to be fixed just like a navigation bar. </p>
  
  <p>If it helps, here's a code snippet: </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>                @media all {
                    body {
                      font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
                    }
                    @media screen and (min-width: 1240px) {
                      body {
                        font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
                      }
                      .header-container {
                        position: relative;
                        font-size: 72px;
                        height: 1em;
                      }
                      .header {
                        position: absolute;
                        display: block;
                        font-size: 72px;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        height: 1em;
                        background-color: rgba(255, 255, 255, 1);
                        display: table;
                      }
                      .header_img {
                        height: 1em;
                        text-align: left;
                        top: 50%;
                        left: 5px;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, 0%);
                      }
                      .enter_sale {
                        background: rgba(19, 134, 129, 1);
                        position: absolute;
                        top: 0em;
                        left: 0%;
                        height: 1.01em;
                        width: 33%;
                        color: white;
                      }
                      .barometer {
                        background: rgba(172, 24, 117, .8);
                        position: absolute;
                        top: 0em;
                        left: 33%;
                        height: 1.01em;
                        width: 33%;
                        color: white;
                      }
                      .barometer:hover {
                        background: rgba(172, 24, 117, 1);
                      }
                      .finance {
                        background: rgba(220, 118, 31, .8);
                        position: absolute;
                        top: 0em;
                        left: 66%;
                        height: 1.01em;
                        width: 34%;
                        color: white;
                      }
                      .finance:hover {
                        background: rgba(220, 118, 31, 1);
                      }
                      .content {
                        position: absolute;
                        font-size: 72px;
                        display: block;
                        top: 1em;
                        left: 12.5%;
                        height: auto;
                        width: 75%;
                        padding: .1em;
                        border-left: solid;
                        border-right: solid;
                        border-color: rgba(19, 134, 129, 1);
                      }
                      .enter_sale_text {
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;
                      }
                      .barometer_text {
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;
                      }
                      .finance_text {
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;
                      }
                      .content_newrules {
                        font-size: 14px;
                      }
                    }
                    @media only screen and (min-width: 320px) and (max-width: 568px) {
                      .header-container {
                        position: relative;
                        font-size: 72px;
                        height: 1em;
                      }
                      .content {
                        position: absolute;
                        font-size: 72px;
                        display: block;
                        top: 1em;
                        height: auto;
                        width: 94%;
                        padding: .1em;
                        border-color: rgba(19, 134, 129, 1);
                      }
                      .header {
                        position: fixed;
                        font-size: 72px;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        height: 1em;
                      }
                      .header_img {
                        display: block;
                        height: 100%;
                        width: auto;
                        margin-left: auto;
                        margin-right: auto;
                        /*transform: translate(0%, -50%);*/
                        font-size: 60px;
                      }
                      .enter_sale {
                        background-color: #9C2329;
                        /*text-align: center;*/
                        position: absolute;
                        top: 0em;
                        left: 0%;
                        height: 1.01em;
                        width: 33%;
                        color: white;
                      }
                      .barometer {
                        background: #27821D;
                        /*text-align: center;*/
                        position: absolute;
                        top: 0em;
                        left: 33%;
                        height: 1.01em;
                        width: 33%;
                        color: white;
                      }
                      .barometer:hover {
                        background: rgba(172, 24, 117, 1);
                      }
                      .finance {
                        background: #307CA9;
                        /*text-align: center;*/
                        position: absolute;
                        top: 0em;
                        left: 66%;
                        height: 1.01em;
                        width: 34%;
                        color: white;
                      }
                      .enter_sale_text {
                        display: none;
                        /*text-align: center;
                          position: absolute;
                          top: 50%;
                          left: 80px;
                          height: auto;
                          width: auto;
                          margin: 0;
                          transform: translate(0%, -50%);
                          font-size: 60px;*/
                      }
                      .barometer_text {
                        display: none;
                        /*text-align: center;
                          position: absolute;
                          top: 50%;
                          left: 80px;
                          height: auto;
                          width: auto;
                          margin: 0;
                          transform: translate(0%, -50%);
                          font-size: 60px;*/
                      }
                      .finance_text {
                        display: none;
                        /*text-align: center;
                          position: absolute;
                          top: 50%;
                          left: 80px;
                          height: auto;
                          width: auto;
                          margin: 0;
                          transform: translate(0%, -50%);
                          font-size: 60px;*/
                      }
                      .content_newrules {
                        font-size: 14px;
                      }
                    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="lookup_zip('init')"&gt;
    &lt;script type="text/javascript" src="resources/enter_sale.js"&gt;
    &lt;/script&gt;
    &lt;div class="header_container"&gt;
      &lt;span class="header"&gt;
              &lt;span class="enter_sale"&gt;
                  &lt;img src="resources/enter_sale.png" class="header_img"&gt;&lt;/img&gt;
                  &lt;span class="enter_sale_text"&gt;
                      Enter Sale
                  &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="barometer"&gt;
                  &lt;img src="resources/barometer.png" class="header_img"&gt;&lt;/img&gt;
                  &lt;span class="barometer_text"&gt;
                      Dashboard
                  &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="finance"&gt;
                  &lt;img src="resources/finance.png" class="header_img"&gt;&lt;/img&gt;
                  &lt;span class="finance_text"&gt;
                      Finance
                  &lt;/span&gt;
      &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;span class="content_newrules"&gt;
                  &lt;h3&gt;
                      Sales Represenative(s)
                  &lt;/h3&gt;
              &lt;form action="resources/submit_form.php" method="post"&gt;
                  Sales Representative: &lt;select id="sales_rep" onchange="checkForm()"  name="sales_rep"&gt;
                      &lt;option selected="selected" name="no_select" value=""&gt;Select a Rep&lt;/option&gt;
                      &lt;option name="Kerry Kennicutt"&gt;Kerry Kennicutt&lt;/option&gt;
                      &lt;!-- The rest are to be determined by PHP --&gt;
                &lt;/select&gt;
                &lt;/br&gt;
                  &lt;span id="secondary_sales_rep_container"&gt;
                      &lt;a href="javascript:add_secondary_sales_rep()"&gt;Add a secondary sales rep... &lt;/a&gt;
                      &lt;/br&gt;
                  &lt;/span&gt;
      &lt;!-- &lt;/br&gt; --&gt;
      &lt;h3&gt;
                      Customer Information
                  &lt;/h3&gt;
      &lt;!-- &lt;/br&gt; --&gt;
      &lt;!-- Note: The following textbox uses CSS to ensure that all the entered characters are UPPERCASE --&gt;
      First Name:
      &lt;input type="text" id="c_first_name" name="c_first_name" style="text-transform: uppercase;" onchange="validate_text(1)"&gt;
      &lt;/br&gt;
      Last Name:
      &lt;input type="text" id="c_last_name" name="c_last_name" style="text-transform: uppercase;" onchange="validate_text(2)"&gt;
      &lt;/br&gt;
      Street Address:
      &lt;input type="text" id="c_address" name="c_address" style="text-transform: uppercase;" onchange="validate_text(3)"&gt;
      &lt;/br&gt;
      Zip Code:
      &lt;input type="text" id="c_zip" name="c_zip" style="text-transform: uppercase" onchange="lookup_zip()"&gt;
      &lt;/br&gt;
      City/St: &lt;span id="cityst"&gt;&lt;!-- This information will be filled in by function lookup_zip() --&gt;&lt;/span&gt;
      &lt;/br&gt;
      &lt;h3&gt;
                      Deal Information
                  &lt;/h3&gt;
      &lt;!-- &lt;/br&gt; --&gt;
      Deal Number:
      &lt;input type="text" id="deal_number" name="deal_number"&gt;
      &lt;/br&gt;
      Stock Number:
      &lt;input type="text" id="deal_stock_number" name="deal_stock_number"&gt;
      &lt;/br&gt;
      Selling Model:
      &lt;input type="text" id="deal_selling_model" name="deal_selling_model" style="text-transform: uppercase;"&gt;
      &lt;/br&gt;
      Trade in 1 Model:
      &lt;input type="text" id="deal_trade_in_model_1" name="deal_trade_in_model_1" style="text-transform: uppercase;"&gt;
      &lt;/br&gt;
      Trade in 1 Amount:
      &lt;input type="text" id="deal_trade_in_amount_1" name="deal_trade_in_amount_1" onchange="picky_currency('deal_trade_in_amount_1')"&gt;
      &lt;/br&gt;
      &lt;span id="second_tradein"&gt;
                  &lt;a href="javascript:show_tradein_2()"&gt;
                      There's more than one trade in...
                  &lt;/a&gt;
                  &lt;/span&gt;
      &lt;/br&gt;
      New/Used:
      &lt;select name="deal_new_status"&gt;
        &lt;option&gt;New&lt;/option&gt;
        &lt;option&gt;Used&lt;/option&gt;
      &lt;/select&gt;
      &lt;/br&gt;
      D&amp;amp;H:
      &lt;input type="text" id="deal_dh" name="deal_dh" onchange="picky_currency('deal_dh')"&gt;
      &lt;/br&gt;
      Finance Amount:
      &lt;input type="text" id="deal_finance_amount" name="deal_finance_amount" onchange="picky_currency('deal_finance_amount')"&gt;
      &lt;/br&gt;
      Pack Amount:
      &lt;input type="text" id="deal_pack" name="deal_pack" onchange="picky_currency('deal_pack')"&gt;
      &lt;/br&gt;
      Retro Amount:
      &lt;input type="text" id="deal_retro" name="deal_retro" onchange="picky_currency('deal_retro')"&gt;
      &lt;/br&gt;
      Holdback Amount:
      &lt;input type="text" id="deal_holdback" name="deal_holdback" onchange="picky_currency('deal_holdback')"&gt;
      &lt;/br&gt;
      &lt;/br&gt;
      &lt;input type="checkbox" id="finance_toggle" onchange="show_finance_information()"&gt;I want to add financing information now.
      &lt;span id="finance_information" style="display:none;"&gt;
                  &lt;/br&gt;
                  &lt;/br&gt;
                  Reserve Amount: &lt;input type="text" id="deal_reserve_amount" name="deal_reserve_amount" onchange="picky_currency('deal_reserve_amount')"&gt;
                  &lt;/br&gt;
                  Warrantee Amount: &lt;input type="text" id="deal_warrantee" name="deal_warrantee" onchange="picky_currency('deal_warrantee')"&gt;
                  &lt;/br&gt;
                  Gap Amount: &lt;input type="text" id="deal_gap" name="deal_gap" onchange="picky_currency('deal_gap')"&gt;
                  &lt;/br&gt;
                  Etch Amount: &lt;input type="text" id="deal_etch" name="deal_etch" onchange="picky_currency('deal_etch')"&gt;
                  &lt;/br&gt;
                  Maintenence Amount: &lt;input type="text" id="deal_maintenence" name="deal_maintenence" onchange="picky_currency('deal_maintenence')"&gt;
                  &lt;/br&gt;
                  Gross Amount: &lt;input type="text" id="deal_gross" name="deal_gross" onchange="picky_currency('deal_gross')"&gt;
                  &lt;/br&gt;
                  &lt;/span&gt;
      &lt;/br&gt;
      &lt;/br&gt;
      &lt;input type="submit" value="Confirm Sales Information"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>