Header elements wont reset after page has been resized in Safari

[JayMarv]

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. http://noahenart.com/header/

When I resize my browser to test the responsiveness everything works according to plan, the problem occurs when I resize it back (From smaller to larger). Elements don't go back to their former positions (unless I refresh the page). This becomes a problem especially when using a mobile device and changing orientation.

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?

<header class="top">
<div class="mast">  

    <h1 title="Hawaii Media Grant">
        <a href="#">
            <img id="logoi" src="img/logo_h.png" alt="Hawaii Media Grant logo">
            <span id="logos">HAWAII</span>
            <span id="logob">MEDIA</span>
            <span id="logom">GRANT</span>
        </a>
    </h1>

    <nav>
        <ul>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Work">Work</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
    </nav>

</div>
</header>

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;}}