title: My css navigation menu refuses to center in the browser?
body: <p>I've tried all the places to put</p>
  
  <pre><code>margin-right: auto
  </code></pre>
  
  <p>and</p>
  
  <pre><code>margin-left:auto
  </code></pre>
  
  <p>The use of</p>
  
  <pre><code>display: inline-block
  </code></pre>
  
  <p>works brilliantly on the actual links, but otherwise messes with the menu if added as a parent.</p>
  
  <p>I feel that in order to make it center in the browser viewport, that I will need to lose some of the styling. I feel there is a conflict between some aspect of the styling that is preventing the centering.</p>
  
  <p>I hope that I'm wrong, and it is possible with somebody's suggestion(s)...</p>
  
  <p>Kind Regards,
  Dale</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.navigation {
      height: auto
      width: 96%;
      border-top-color: rgb(119,120,122);
      border-top-style: solid;
      border-top-width: 1px;
      border-bottom-color: rgb(119,120,122);
      border-bottom-style: solid;
      border-bottom-width: 1px;
      margin-top: 1%;
      margin-right: auto;
      margin-bottom: 1%;
      margin-left: auto;
      padding-top: 1%;
      padding-bottom: 1%;
      background-color: transparent;
      background-image: none;
  }
  
  ul {
      height: auto;
      overflow: hidden;
      margin-right: auto;
      margin-left: auto;
  }
  
  ul li {
      display: inline;
  }
  
  ul li ul {
      display: none;
  }
  
  ul li:hover ul {
      height: auto;
      width: 96%;
      display: block;
      position: absolute;
      margin-right: auto;
      margin-left: auto;
  }
  
  ul li a {
      display: inline-block;
      cursor: pointer;
      position: relative;
      margin-right: 0.15%;
      margin-bottom: -0.2%;
      padding-top: 1.25%;
      padding-right: 1.4%;
      padding-bottom: 1.25%;
      padding-left: 1.4%;
  }
  
  ul li:hover ul a {
      margin-right: -0.2%;
      margin-bottom: 0;
  }
  </code></pre>
  
  <p>P.S. I took out my comments and any non-essential codes, I realize that I write in long-hand CSS, but I like to do so ;-)</p>