title: :hover not working with pull-right or pull-left classes
body: <p>For some reason, using pull-left and pull-right classes in my HTML prevents :hover and ng-click from working. I would like to add the pull-left class to #mobile-nav #logo and the pull-right class to #mobile-nav p, so that they stay in the same line and stay to the left and right of the mobile nav menu, respectively, regardless of the width of the menu. However when I add pull-left or pull-right classes, the :hover pseudoclass stops working on #logo and both #logo and p lose the ng-click functionality. I cannot for the life of me think why (the same thing happens when I remove pull-left and pull-right, adding float:left and float:right instead).</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="mobile-nav" ng-if="$ctrl.mobileNav"&gt;
    &lt;div id="logo"&gt;
      &lt;a ng-click="$ctrl.mobileNav = false;" href="#welcome"&gt;&lt;h1&gt;A N S A R O&lt;/h1&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;p ng-click="$ctrl.mobileNav = false;"&gt;X&lt;/p&gt;
  
    &lt;ul class="-mobile-nav-menu"&gt;
      &lt;li&gt;&lt;a ng-click="$ctrl.mobileNav = false;" href="#about" du-smooth-scroll&gt;About&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a ng-click="$ctrl.mobileNav = false;" href="#" du-smooth-scroll&gt;Blog&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a ng-click="$ctrl.mobileNav = false;" href="#team" du-smooth-scroll&gt;Team&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a ng-click="$ctrl.mobileNav = false;" href="#jobs" du-smooth-scroll&gt;Jobs&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a ng-click="$ctrl.mobileNav = false;" href="#contact" du-smooth-scroll&gt;Contact&lt;/a&gt;&lt;/li&gt;          
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60%;
    z-index: 1000;
    background-color: #199EB8;
  }
  
  #mobile-nav #logo {
    margin-left: 20px;
    margin-right: 20px;
  }
  
  #mobile-nav #logo h1 {
    color: white;
    cursor: pointer;
  }
  
  #mobile-nav #logo h1:hover {
    color: #111;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }
  
  #mobile-nav #logo img {
    padding: 0;
    margin: 0;
    max-height: 40px;
    border-radius: 10px;
  }
  
  #mobile-nav p {
    color: #fff;
    font-size: 24px;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  
  #mobile-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  #mobile-nav ul li {
    position: relative;
  }
  
  #mobile-nav ul li a {
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    padding: 10px 22px 10px 15px;
    position: relative;
    text-decoration: none;
    width: 100%;
    display: block;
    outline: none;
  }
  
  #mobile-nav ul li a:hover {
    color: #111;
  }
  
  #mobile-nav ul li li {
    padding-left: 50px;
  }
  </code></pre>
  
  <p>Any thoughts/fixes would be greatly appreciated!</p>