title: Active Nav Link
body: <p>I have been trying to get to grips with responsive layouts. </p>
  
  <p>The active link on the nav bar does not appear to be working and I cannot see what I have done wrong. </p>
  
  <p>I would like the navigation bar to highlight the current active page. In this case, the active page is the home page. At the moment it is displaying a grey background, however, I would like it to be orange.</p>
  
  <p>It would be much appreciated if someone could take a look at the code. </p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Responsive Layout&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
          &lt;meta charset ="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;/head&gt;
  
  &lt;body class="body"&gt;
      &lt;header class="main-header"&gt;
          &lt;img src="Images/logo.gif" alt="Logo"&gt;
          &lt;nav&gt;&lt;ul&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/nav&gt;
      &lt;/header&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>body{
      background-image: url('Image/bg.png');
      color: #000305;
      font-size: 87.5%;
      font-family: Arial;
      line-height: 1.5;
      text-align: left; 
          margin: 0;
      padding: 0;
      }
  
  a {
      outline: 0;
      }
  
  a img {
      border: 0px; 
      text-decoration: none;
  }
  
  a:link, a:visited{
      color: #CF5C3F;
      padding: 0 1px;
      text-decoration: none;
  
  }
  
  a:hover, a:active{
      background-color: #CF5C3F;
      color: #fff;
      text-decoration: none;
  }
  
  .body{
      margin: 0 auto; 
      width: 70%;
      clear: both; 
  }
  
  .main-header img{
      width: 30%;
      height: auto; 
      margin: 2% 0;
  }
  
  .main-header nav{
      background: #666;
      font-size: 1.143em;
      height: 40px;
      line-height: 30px;
      margin: 0 auto 30px auto;
      text-align: center;
      border-radius: 5px; 
  }
  
  .main-header nav ul{
      list-style: none; 
      margin: 0 auto;
  }
  
  .main-header nav ul li{
      float: left; 
      display: inline; 
  }
  
  .main-header nav a:link, .main-header nav a:visited{
      color: #fff;
      display: inline-block;
      height: 30px;
      padding: 5px 23px;
      text-decoration: none;
  }
  
  .mainHeader nav a:hover, .mainHeader nav a:active,
  .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
      background: #CF5C3F;
      color: #fff;
      text-shadow: none !important;
  }
  .main-header nav li a {
      border-radius: 5px;
  }
  
  .main-header img {
      width: 30%;
      height: auto;
      margin: 3% 0;
  }
  </code></pre>