title: Issues with hover not working as well as other hover sections on site
body: <p>I've got a little bug in my website I'm hoping someone can help me out with. 
  I am using 'Hover' to make my logos flash when someone hovers their mouse over it. I have two logos in my navigation header bar on my site, one on the left side and one on the right. Left side works fantastically always and right side doesn't. Right side logo hover is very temperamental and doesn't always work like the hover over the left logo. Have I done something to my coding to make it jam like it's doing?<br>
  I'm fairly new to CSS, so I'm sure I have not done my coding as correctly as I should have.</p>
  
  <p>Website is <a href="http://www.willothewisp.com.au/aboutkate/" rel="nofollow noreferrer">http://www.willothewisp.com.au/aboutkate/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#wrapperHeader div#header {
    width:0px;
    height:40px;
    margin:0 auto;
  }
  
  div#wrapperHeader div#header .upperlogo { 
    width:250px;
    height:80px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    border: 0; 
  }
  
  div#wrapperHeader div#header .upperlogob { 
    width:250px;
    height:80px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    border: 0;
  }
  
  div#wrapperHeader div#header .lowerlogo { 
    width:78px; 
    height:78px;
    position: fixed; 
    top: 0; 
    right: 0; 
    border: 0;
  }
  
  div#wrapperHeader div#header .lowerlogob { 
    width:78px; 
    height:78px;
    position: fixed; 
    top: 0; 
    right: 0; 
    border: 0;
  }
  
  @media screen and (min-width: 1181px) {
    div#wrapperHeader div#header:hover .lowerlogo {
      display: none;
    }
    div#wrapperHeader div#header:hover .upperlogo {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapperHeader"&gt;
      &lt;div id="header"&gt;
          &lt;a href="http://www.willothewisp.com.au/home-page"&gt;
              &lt;img class="upperlogob" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59800933b3db2babbb993c09/1501563188704/2.png?format=1000w" /&gt;
      &lt;/div&gt;
      &lt;/a&gt;
      &lt;div id="header"&gt;
          &lt;a href="https://www.willothewisp.com.au/home-page"&gt;
              &lt;img class="upperlogo" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c65c6c534a563924187a6/1500276173924/?format=1000w" /&gt;
      &lt;/div&gt;
      &lt;/a&gt;
      &lt;div id="header"&gt;
          &lt;a href="http://www.willothewisp.com.au/home-page"&gt;
              &lt;img class="lowerlogob" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59b7669ba803bbc8f65ad97f/1505191581265/favcon+2.png?format=300w" /&gt;
      &lt;/div&gt;
      &lt;/a&gt;
      &lt;div id="header"&gt;
          &lt;a href="http://www.willothewisp.com.au/home-page"&gt;
              &lt;img class="lowerlogo" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c67766b8f5bacd67d9504/1500276683429/?format=300w" /&gt;
      &lt;/div&gt;
      &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>