title: My custom stylesheet won't override the foundation.css stylesheet?
body: <p>I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet. The issue is because of the <em>foundation.css</em> file as well as the <em>normalize.css</em> possibly. For some odd reason though the styles do override while being in a <em>mobile resolution</em> which has me completely lost. For example in my custom stylesheet (<em>app.css</em>) I have the following line: </p>
  
  <p><code>li a {background-color: orange;}</code></p>
  
  <p>Just for testing measures obviously. As the code above is shown you should be able to tell that any list with a link should have an <em>orange background color</em>. When viewing the website in my native resolution (<em>1920px <strong>x</strong> 1080px</em>) none of them are shown with an orange background. You can view an <a href="https://i.imgur.com/WMva5An.png" rel="nofollow noreferrer">image</a> of what I have explained.</p>
  
  <p>As you can see the blue button shown with "<em>Right Button Active</em>" inside of it is the default color that the <em>foundation.css</em> stylesheet makes it. Now when I change my Google Chrome window to a thin window and take a look at the <em>"Right Button Active"</em> button it actually turns the button <em>orange</em> as you can see at the following <a href="https://i.imgur.com/U3HgU8Q.png" rel="nofollow noreferrer">picture</a>.</p>
  
  <p>I have looked at the other question mentioned on <strong>stack overflow:</strong> <a href="https://stackoverflow.com/questions/7641082/how-do-i-get-my-import-stylesheet-to-override-the-main-stylesheet"><em>How do I get my @import stylesheet to override the main stylesheet?</em></a> 
  and tried to follow that solution but that didn't work for me in solving my issue. What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it <em>does not</em> show up as I have it styled in my custom stylesheet. </p>
  
  <p>Here is my <em>head.php</em> file to show you how my stylesheets are sorted and / or arranged:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Foundation example&lt;/title&gt;
      &lt;link rel="stylesheet" href="foundation/css/normalize.css"&gt;
      &lt;link rel="stylesheet" href="foundation/css/foundation.css"&gt;
      &lt;link rel="stylesheet" href="includes/app.css"&gt;
      &lt;script src="foundation/js/vendor/modernizr.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;?php
      include 'header.php';
    ?&gt;
  </code></pre>
  
  <p>Any ideas?</p>