title: Quirky navigation positioning issue has left me stumped.
body: <p>I've been working on my first responsive site and I having an issue with my navigation.</p>
  
  <p>The part that i'm stumped as is the the main header (#header_bar .heading h1 a) is not staying inside of the #header_bar container whenever i try to bump up the size of the text.</p>
  
  <p>I would try to achieve this without using any positioning or negative margins but i have been coming up short. </p>
  
  <p>I am including a jsfiddle link with the css reset in place. I hope this is enough information and i would be really grateful to whoever took the time to look at this. </p>
  
  <p>Thanks a lot!</p>
  
  <p><a href="http://jsfiddle.net/Leo12534/5J9LL/" rel="nofollow">http://jsfiddle.net/Leo12534/5J9LL/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Anna Paulette&lt;/title&gt;
  
      &lt;!-- CSS FILES BEING LINKED --&gt;
      &lt;link rel="stylesheet" href="reset.css" /&gt;
      &lt;link rel="stylesheet" href="styles.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="header_wrap"&gt;
          &lt;section id="header_bar"&gt;
              &lt;div class="heading"&gt;
                  &lt;h1&gt;&lt;a href="#"&gt;Test TestTest&lt;/a&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
  
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;!-- end header_wrap --&gt;
  
      &lt;div id="header_content_wrap"&gt;
  
          &lt;section id="header_content"&gt;
              &lt;h1&gt;Lorem ipsum dolor.&lt;/h1&gt;
              &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/h2&gt;
          &lt;/section&gt;
          &lt;!-- End header Content --&gt;
      &lt;/div&gt;
  
      &lt;div id="header_dirt"&gt;
      &lt;/div&gt;
      &lt;!-- End header dirt --&gt;
  
      &lt;div id="content_wrap"&gt;
  
          &lt;section id="main_content"&gt;
              &lt;h1&gt;Test Test Test&lt;/h1&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis
                  &lt;cite&gt;ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita&lt;/cite&gt;.
                  &lt;strong&gt;Quas, at!&lt;/strong&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;a href="www.google.com"&gt;www.google.com&lt;/a&gt;
              &lt;/p&gt;
  
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex deserunt dignissimos officia est perferendis ut neque dolorum nesciunt quis quaerat. Quod, sunt, itaque, officia, quaerat esse similique doloremque quasi ex soluta adipisci illo ea quas officiis ratione odit magnam provident repellat inventore ab perspiciatis neque architecto rerum expedita. Quas, at!&lt;/p&gt;
  
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, vero, ullam quam perferendis deserunt vel quasi voluptatem sapiente impedit natus sequi dolorum sunt eveniet aut.&lt;/p&gt;
          &lt;/section&gt;
  
          &lt;section id="sidebar_content"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.&lt;/p&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
  
          &lt;section id="sidebar_content"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto alias quam consequatur cum voluptatum.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolor.&lt;/p&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
                  &lt;li&gt;test test&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
  
      &lt;/div&gt;
      &lt;!-- end content_wrap --&gt;
  
      &lt;div id="footer_wrap"&gt;
          &lt;section id="footer"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;test&lt;/li&gt;
                      &lt;li&gt;tes&lt;/li&gt;
                      &lt;li&gt;test&lt;/li&gt;
                      &lt;li&gt;test&lt;/li&gt;
                      &lt;li&gt;test&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
          &lt;/section&gt;
          &lt;!-- End footer --&gt;
      &lt;/div&gt;
  
      &lt;!-- end footer_wrap --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  @import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
  @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,400italic,600italic,700italic);
  
  
  /*-----------------------------------------------------------------
  // Global Styles Styling
  -----------------------------------------------------------------*/
  body {
    color: #fff;
    background: url("") #AAAAAA repeat -20px -110px; 
  }
  
  body p, ul li {
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  }
  
  a:link, a:visited {
    text-decoration: none;
    outline: none;
    color: #fc6b35;
  }
  a:hover {
    color: #ba3b0d;
  }
  body cite {
    font-style: italic;
  }
  body strong {
    font-weight: bold;
  }
  
  h1 {
    font-weight: normal;
    font-size: 36px;
  }
  
  h2 {
    font-weight: normal;
    font-size: 30px;
  
  }
  
  h3 {
    font-size: 22px;
    font-weight: normal;
  
  }
  
  h4 {
    font-size: 18px;
    font-weight: normal;
  }
  
  /*-----------------------------------------------------------------
  // Header Styling
  -----------------------------------------------------------------*/
  #header_wrap {
    background-color:#001F3F;
    position:relative;
    top:0;
    -moz-box-shadow: 0px 2px 15px 0px #bebebe; 
    -webkit-box-shadow: 0px 2px 15px 0px #bebebe; 
    box-shadow: 0px 2px 15px 0px #bebebe; 
    clear: both;
  }
  
  #header_bar {
    background-color: #fdfdfd !Important;
    width:75%;
    margin: 0 auto;
    position: relative;
  }
  
  #header_bar .heading {
      clear: both;
      width: 100%;
      height: 100%;
      display: block;
  }
  
  #header_bar .heading h1 {
    display:block;
    float:left;
    height:100%;
  clear:left;
  }
  
  #header_bar .heading h1 a {   
    color:#CFB590;
    font-family: 'Amatic SC', cursive;
    font-size: 2.2em;
    font-weight:700;
    height:100%;
  }
  
  #header_bar .heading h1 a:hover {   
    color:#49281F;
  }
  
  #header_bar nav { /* width: 50%; */ text-align:right; /* float: right; */ clear: right; /* background-color: orange; */ /* width: 680px; */ height: 100%;}
  #header_bar nav ul {  list-style: none;   padding: 0px;   margin: 0px; font-weight: bold;   /* float: left; */  height: 100%;}
  #header_bar nav ul li { display: inline-block; }
  #header_bar nav ul li a { 
    display: block; 
    padding: 20px 20px; 
    text-decoration: none;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(78, 68, 60, 0.5);
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    font-family: 'Josefin Sans', sans-serif;
  
  }
  #header_bar nav ul li a:hover { background-color: #CFB590; color: #fff; }
  
  
  #header_content_wrap {
    background: url("") #FF4136 repeat-x -20px -110px; 
    width:100%;
    height:250px;
  
  }
  
  #header_content {
    width:75%;
    height:100%;
    margin: 0 auto;
    background: #85144B url("") no-repeat 0px 10px; 
  }
  
  #header_content h1 {
    margin: 0;
    padding: 0 0 15px 0;
    font-family: "Tungsten A", "Tungsten B", Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    float:right;
    margin-top:20px;
    clear:both;
    color:#C96879;
  }
  
  #header_content h2 {
    float:right;
    clear:both;
  }
  
  #header_dirt {
    background: url("") #FF851B repeat-x -20px -110px; 
    width:100%;
    height:25px;
    clear: both;
  }
  
  /*-----------------------------------------------------------------
  // Content Styling
  -----------------------------------------------------------------*/
  #content_wrap {
        background-color:#111111;    
    width:75%;
    margin: 0 auto;
    height:100%;
    overflow:hidden;
  
    clear: both;
  }
  
  #content_wrap p {
    margin:1.041666666667%; /*10 / 960*/
    line-height: 1.375em;
  
  }
  
  #main_content {
    width:65%; /* 672 / 960 */
    float:left;
    padding:1.041666666667%; /*10 / 960*/
    margin:1.041666666667%; /*10 / 960*/
    background-color: rgba(49, 44, 44, 0.2);
    background: rgba(49, 44, 44, 0.2);
  }
  
  #sidebar_content {
    width:26%; /* 288 / 960 */
    float:left;
    background-color: #001F3F;
    padding:1.041666666667%; /*10 / 960*/
    margin:1.041666666667%; /*10 / 960*/
    background-color: rgba(49, 44, 44, 0.2);
    background: rgba(49, 44, 44, 0.2);
  }
  
  /*-----------------------------------------------------------------
  // Footer Styling
  -----------------------------------------------------------------*/
  #footer_wrap {
    background-color:#85144B;
    clear:both;
    position:relative;
    bottom:0;
    left: 0;
    height: 120px;
    width: 100%;
  }
  
  #footer {
    width:75%;
    margin:0 auto;
    background-color:#3D9970;
  }
  
  /*-----------------------------------------------------------------
  // MEDIA QUERIES
  -----------------------------------------------------------------*/
  
  @media screen and (min-width: 951px) {
    h1 {font-size: 36px;} #header_bar .heading h1 a {text-align: center;}
  }
  @media screen and (max-width: 950px) {
    h1 {font-size: 24px;} #header_bar .heading h1 a {text-align: center;}
  }
  @media screen and (max-width: 749px) {
    h1 {font-size: 22px;} #header_bar .heading h1 a {text-align: center;}
  }
  @media screen and (max-width: 569px) {
    h1 {font-size: 20px;} #header_bar .heading h1 a {text-align: center;}
  }
  @media screen and  (max-width: 321px) {
    h1 {font-size: 18px; } #header_bar .heading h1 a {text-align: center;} #header_bar nav ul li a { font-size:12px;}
  }
  
  /*Navigation*/
  @media (max-width:48.000em){
    #header_bar .heading h1 {width:100%;text-align: center;}
    #header_bar nav ul {  width: 100%; font-weight: normal;  }
    #header_bar nav ul li { width: 100%;  text-align: center;  }
    #header_bar nav ul li a { padding: 10px -10px; border-bottom: 1px solid #ccc; display: block;  padding:10px; margin:0;}
  }
  </code></pre>