title: How to effectively postion my navigation menu with css
body: <p>I am working on creating a new Navigation menu for my first official website and am running into an issue. When using JQuery to alter the CSS, the navigation menu shifts position. Can someone explain to me a better way to position the menu so it will absolutely stay centered, and explain the thought process? Thank you!</p>
  
  <p>**CLARIFICATION- By centered I am refrencing the way the navigation menu is in the corner. I don't. Want any shimming as the padding changes on hover.</p>
  
  <p>Below is my current code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $('#logo').mouseenter(function() {
      $('#logofade').attr("src", "csweblogoblack.png");
    });
  
    $('#logo').mouseleave(function() {
      $('#logofade').attr("src", "csweblogo.png");
    });
  
    $('.menu-item a').mouseenter(function() {
      $(this).css("padding-top", "30px");
      $(this).css("padding-bottom", "30px");
    });
  
    $('.menu-item a').mouseleave(function() {
      $(this).css("padding-top", "20px");
      $(this).css("padding-bottom", "20px");
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* color scheme: #000000 #263248 #7E8AA2 #FFFFFF #FF9800 */
  
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
  }
  
  ul {
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
  }
  
  nav {
    position: absolute;
    text-align: center;
    width: 900px;
    box-shadow: 10px 10px 20px #888888;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -70px;
    left: -310px;
  }
  
  .menu-item a {
    color: white;
    text-transform: uppercase;
    font-family: 'Inconsolata', monospace;
    font-size: 40px;
    font-weight: bold;
    display: table-cell;
    padding: 20px;
    display: inline-block;
  }
  
  .logo a {
    color: white;
    text-transform: uppercase;
    font-family: 'Inconsolata', monospace;
    font-size: 40px;
    font-weight: bold;
    display: table-cell;
    padding: 20px;
    display: inline-block;
  }
  
  .menu-item a:hover {
    color: black;
  }
  
  #logo img {
    width: 100px;
    height: 100px;
  }
  
  #logo a {
    padding: 70px 20% 10px;
    background-color: black;
  }
  
  #logo a:hover {
    background-color: #FFFFFF;
  }
  
  #home a {
    background-color: #263248;
    padding-left: 30%;
    padding-right: 30%;
  }
  
  #contact a {
    background-color: #7E8AA2;
    padding-left: 40%;
    padding-right: 40%;
  }
  
  #about a {
    background-color: #FF9800;
    padding-left: 45%;
    padding-right: 45%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Chris Scalzi Portfolio&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;nav&gt;
      &lt;div class="logo" id="logo"&gt;
        &lt;a&gt;&lt;img id="logofade" src="csweblogo.png" alt="LOGO" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="menu-item" id="home"&gt;&lt;a href="*"&gt;Home&lt;/a&gt;&lt;/div&gt;
      &lt;div class="menu-item" id="contact"&gt;&lt;a href="*"&gt;Contact&lt;/a&gt;&lt;/div&gt;
      &lt;div class="menu-item" id="about"&gt;&lt;a href="*"&gt;About&lt;/a&gt;&lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>