title: Google Chrome doesn't render background-color
body: <p>I am trying to create a custom bootstrap <code>navbar</code>, this is basically extending the functionality of the bootstrap <code>navbar</code>.</p>
  
  <p>The following is an extract of the code from the <code>navbar</code> (I didn't paste all the code because it becomes quite long and the other code probably won't help resolve the issue. I can confirm that all the <code>div</code>'s and elements do get closed.)</p>
  
  <pre><code>echo "&lt;div class='navbar navbar-app navbar-static-top'&gt;";
      echo "&lt;div class='navbar-header'&gt;";
          echo "&lt;ul class='nav navbar-nav navbar-expand-menu'&gt;";
              echo "&lt;li&gt;";
                  echo "&lt;a href='#' id='minimize-side-bar'&gt;";
                      echo "&lt;i class='fa fa-ellipsis-v'&gt;&lt;/i&gt;";
                  echo "&lt;/a&gt;";
              echo "&lt;/li&gt;";
          echo "&lt;/ul&gt;";
      echo "&lt;/div&gt;";
  </code></pre>
  
  <p>Basically what happens is when you click on the <code>minimize-side-bar</code> link and then click off the page (so that it keeps the state of the element as <code>:focus</code>) it doesn't keep the styling of the background color (see image below).</p>
  
  <p>I have checked in chrome developer tools (DT) to see which CSS rule was overwriting the background color, but according to DT the rule was being applied.</p>
  
  <p>Am I doing something wrong in my CSS or is this a chrome issue?</p>
  
  <p><a href="https://i.stack.imgur.com/PsMdz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PsMdz.png" alt="From here you can see that developer tools shows the rule is active but does not render it"></a></p>