title: Header elements not resetting when page has been resized (in Safari)
body: <p>I’ve got this header made up of a nav element and a heading element containing an inline image and words. I chose to place the words into spans in order to target them individually with media queries. Here is a link to the header. <a href="http://noahenart.com/header/" rel="nofollow">http://noahenart.com/header/</a></p>
  
  <p>Try resizing your browser and everything works according to plan, but resize it back and it doesn’t go back to its former self (unless you refresh the page).
  This becomes a problem when using a mobile device and changing orientation. </p>
  
  <p>I’ve tried different things including having the image on a separate heading, the lot enclosed in an hgroup but that didn’t work out either. Any ideas how I can fix this? </p>
  
  <pre><code>&lt;header class="top"&gt;
  &lt;div class="mast"&gt;  
  
      &lt;h1 title="Hawaii Media Grant"&gt;
          &lt;a href="#"&gt;
              &lt;img id="logoi" src="img/logo_h.png" alt="Hawaii Media Grant logo"&gt;
              &lt;span id="logos"&gt;HAWAII&lt;/span&gt;
              &lt;span id="logob"&gt;MEDIA&lt;/span&gt;
              &lt;span id="logom"&gt;GRANT&lt;/span&gt;
          &lt;/a&gt;
      &lt;/h1&gt;
  
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" title="About"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Work"&gt;Work&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>header h1 { 
  font-size: 1em; 
  text-transform: uppercase; 
  line-height: 1.1875em; 
  font-weight: normal; 
  font-style: normal;
  float: left; 
  margin: 0 0 0 1%; 
  position: relative;}
  
  header h1 img { 
  float: left; 
  position: relative; 
  bottom:30px; right: 10px;} 
  
  header h1 a { 
  color: #000; 
  font-family: "nevisBold","nevis", "Helvetica neue", Arial,sans-serif; 
  font-size: 2.2em; 
  padding: 0;}
  
  header h1 a span#logos,
  header h1 a span#logob,
  header h1 a span#logom { 
  display: inline;}
  
  a {
  background: transparent; 
  color: #bababa;
  font-size: 100%; 
  margin: 0; padding: 0;
  text-decoration: none;
  vertical-align: baseline; 
  -moz-outline: none;}
  
  a:focus, 
  a:hover, 
  a:active {
  outline: 0;}
  
  ul, ol { 
  margin-left: 0; 
  padding: 0;  
  list-style: none;}
  
  header ul {
  float: right;
  margin: 0;
  clear: none;}
  
  header li {
  display: inline;
  margin: 0 0 0 1.5em;}
  
  header a {
  color: #333;
  padding: 0 0 5px 0;}
  
  header a:hover {
  border-bottom: 6px solid #bababa;
  color: #8cc4f5;}
  
  header.top {
  background: #fff; 
  width: 100%;}
  
  .mast {
  margin: 0 auto;   
  overflow: auto;
  padding: 5em 0 1.25em 0;
  width: 71.830985915492958%; max-width: 1020px;} 
  
  @media screen and (max-width: 1195px){
  .mast { padding:52px 0 20px 0;}
  header h1 { float:none; text-align:center; margin-top:-30px; margin-bottom:; padding-top:; padding-bottom:;}
  header h1 img { float:none; bottom:-30px; right: 10px}
  header ul { float:none; margin:0.7em auto 1.15em; text-align:center;}}
  
  @media screen and (max-width: 769px) {
  header h1 { font-size: 0.8em;}
  header h1 a img#logoi { bottom: 0; right: 0; margin: 0 0 0.5em 0; width: 8%;}
  header h1 a span#logos { display: block !important; margin: 0 0 0.5em 0;}
  header ul { margin: 0.7em auto 0;}
  header li { margin: 0 0 0 .5em;}}
  
  @media screen and (max-width: 480px){
  header h1 a { padding-bottom: 0; font-size: 2em;}
  header h1 a img#logoi {width: 15%;}
  header li { margin: 0 0 0 .4em;}}
  </code></pre>