title: HTML/CSS - Styling going to both <li> sections on page
body: <p>I've got some a small problem with a html page at the moment. </p>
  
  <p>The page is setup with 2 blog posts. They are both in there own bordered sections using <code>&lt;li&gt;</code>. </p>
  
  <p>I also use <code>&lt;li&gt;</code> for my navigation and for the blog posts but the styling is going around both.</p>
  
  <p>I know it must be to do with creating a class or ID or something but I just can't get it to work. Thanks in advance!!</p>
  
  <p>Any pointers would be great thanks!</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link href="coursework1.css" rel="stylesheet" type="text/css"&gt;
  &lt;title&gt;Hobbies&lt;/title&gt;
  
  &lt;script src="scripts/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/modernizr-custom.73764.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/webshim/polyfiller.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $.webshims.polyfill('mediaelement');
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt; Hobbies &lt;/h1&gt;
  &lt;nav class="nav"&gt;
    &lt;li&gt;&lt;a href="/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/work/"&gt;Hobbies&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/clients/"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
  &lt;/nav&gt;
  &lt;p&gt;  
         &lt;ul&gt; 
      &lt;li&gt; 
          &lt;p&gt;  &lt;h2&gt; Pompey Win! - March 14, 2012 &lt;/h2&gt; &lt;/p&gt; 
          &lt;img class="focus pic" src="pompeygoal.jpg"
     style="float:left; width:400px; height:300px; border:none;"
      /&gt;
         &lt;img class="focus pic" src="pompeychallenge.jpg"
     style="margin-left: 50px; width:400px; height:300px; border:none;"
      /&gt;
       &lt;img class="focus pic" src="andyawford.jpg"
     style="float:right; width:400px; height:300px; border:none;"
      /&gt;  
          &lt;p&gt; On tuesday evening of this week, I went to Portsmouth. Unfortunately, I do support them... But being the good fan I am , I still made the trip down to the south coast to show my support. It turned out to be a really good evening though as we ended up winning 3-2!&lt;/p&gt; 
      &lt;/li&gt; 
      &lt;li&gt; 
          &lt;p&gt; &lt;h2&gt;Notting Hill Carnvial - March 13, 2012 &lt;/h2&gt; &lt;/p&gt; 
          &lt;video width="480" height="360" controls id="nhVid"&gt;
      &lt;source src="NottingHillVid.mp4" type="video/mp4"&gt;
      &lt;source src="NottinHillVid.webm" type="video/webm"&gt; &lt;/video&gt;   
       &lt;p&gt; Every summer, I always look forward to Notting Hill Carnival. This year was my third year, and I had a great time. It was extremely wet, however this did not dampen spirits and everyone still had a smile on their face. I saw loads of music and also had some really great jerk chicken. &lt;p&gt;  
      &lt;/li&gt; 
  &lt;/ol&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>@charset "UTF-8";
  
  body {
    background-color:#808080; 
    font-family:symbol, 'Standard Symbols L';
    margin: 0 0 100px;
  }
  
  h1 { 
    text-align: center;
    color: white;
    text-shadow: 2px 2px #000000;
    font-size:350%;
  }
  
  h2 {
    color: white;
    font-size:30px;
    text-align:center;
  }
  
  #tableAbout { 
    width:100%; cellpadding:10; cellspacing:5;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    color: white; table align:center;
  }
  
  .nav{  
    list-style:none;
    text-align:center;
    border-style: solid;
    border-width: 2px;
    background: -webkit-linear-gradient(grey, black);
    background: -o-linear-gradient(grey, black);
    background: linear-gradient(grey, black);
  }
  
  .nav li{
      display:inline;
  }
  
  .nav a{
    display:inline-block;
    padding:10px;
      transition: all 0.2s ease-in;
      color: white;
      font-size:25px; 
  }
  
  .nav a:hover{
    -webkit-stroke-width: 5.3px;
    -webkit-stroke-color: #FFFFFF;
    -webkit-fill-color: #FFFFFF;
    text-shadow: 1px 1px 20px white;
  }
  
  td[target] {
    font-weight: bold;
  }
  
  #newsletterForm {
      color: white;
  }
  
  footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px; 
    clear:both;
    left: 0;
    font-color:black;
    text-align: center;
    font-weight: bold;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  }
  
  html {
    position: relative;
    min-height: 100%;
  }
  
  .focus {
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
  }
  
  .focus:hover {
    border: 70px solid #000;
    border-radius: 50%;
  }
  
  
  li { 
    background-color: rgba(194, 181, 158, .5); 
    border: 1px solid rgb(194, 181, 158); 
    border-radius: 10px; 
    margin: 10px 0; 
    padding:10px;
  }
  
  li:nth-child(even){ 
    background-color: rgba(242, 224, 131, .5);  
    border: 1px solid rgb(242, 224, 131); 
  }
  
  ul
  {
    list-style-type: none;
  }
  </code></pre>