title: HTML/CSS3 - I added a shape into my nav bar, and it messed up the alignment or my wrapper
body: <p>So I have started to mess around with responsive html. But anyways, that's not really the issue. The issue is after i added this parallelogram shape, it messed up the contents of my wrapper. I tried using z-index to make it so the nav bar appears over the wrapper, but then It didn't work when I set my wrapper to relative, it worked when i set it to absolute/fixed and z-index -1. I'm just trying to get my wrapper to be aligned in the center while having the parallelogram shape in the nav bar. Because right now, my 2 column layout is being messed up because of the shape.(I suck at explaining, but if you look at my site on jsfiddle, I think you can get the idea) Thanks!</p>
  
  <p><a href="http://jsfiddle.net/RgKaQ/" rel="nofollow">http://jsfiddle.net/RgKaQ/</a></p>
  
  <p>heres something I've tried</p>
  
  <pre><code>nav {
      height: 40px;
      width: 100%;
      background: #33FF00;
      font-size: 11pt;
      font-family: 'PT Sans', Arial, sans-serif;
      font-weight: bold;
      position: relative;
      border-bottom: 2px solid #339900;
      z-index : 1;
  
  }
  .wrapper {
      width: 800px;
      margin: 0 auto;
         /* position: relative; doesn't work*/
          position: fixed; /*works but it makes it not aligned in the center*/
      z-index: -1;
  }
  </code></pre>