title: Positioning an Unordered List horizontally
body: <p>I have an Unordered List which functions as a basic navigation bar. </p>
  
  <p>My goal is to display it in line at a width of 60% of the screen and to be centred. The issue I am having is that it displays a little off centre and the size also varies. 
  I use an external style sheet.  Any help will be much appreciated. </p>
  
  <p>Here is the page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Help&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/&gt;
          &lt;meta charset="UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;Home&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="link.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="link2.htm"&gt;Link2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="link3.htm"&gt;Link3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="container"&gt;
              &lt;p&gt;
                  Some Text. Some Text. Some Text. Some Text. Some Text.
              &lt;/p&gt;
              &lt;p&gt;
                  More Text. More Text. More Text. More Text. More Text.
              &lt;/p&gt;
          &lt;/div&gt;&lt;!-- End of container --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the external style sheet:</p>
  
  <pre><code>h2
  {
      /* Positioning */
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      /* Colours */
      background-color: #99CCCC;
      /* Border */
      border: 1px solid #000000;
      border-radius: 25px;
  }
  ul
  {
      /* Positioning */
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  li
  {
      /* Positioning */
      padding-left: 5px;
      padding-right: 5px;
      display: inline-block;
      vertical-align: top;
      /* Colours */
      background-color: #99DDBB;
      /* Border */
      border: 1px solid #000000;
      border-radius: 25px;
  }
  a
  {
      /* Colours */
      color: #000000;
  }
  a:hover
  {
      font-style: italic;
  }
  #container
  {
      /* Positioning */
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  p
  {
      /* Positioning */
      padding: 10px;
      text-align: left;
      /* Colours */
      background-color: #99CCCC;
      /* Border */
      border: 1px solid #000000;
      border-radius: 25px;
  }
  img
  {
      /* Positioning */
      width: 50%;
      border: 1px solid #000000;
      border-radius: 25px;
  }
  </code></pre>