title: How to horizontally center an always-on-top (sticky) element with css3?
body: <p>I need to achieve what's on the image. 
  I can't put my menu in the blue area (horizontal center + vertical top + sticky)</p>
  
  <p>Tried using position:fixed but this was the best I could get. </p>
  
  <p><img src="https://i.stack.imgur.com/YTdPW.png" alt="My problem"></p>
  
  <p>CSS:</p>
  
  <pre><code>.menu 
  {   
  position:fixed;
  height: 40px;
  width: 505px;
  
  background: #4c4e5a;
  background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>