Help with sticky menu?

Using available code, Ive have a sticky menu that sticks to the top of the page when the user scrolls using JQuery. But for the world of me I just cant get it to centre, it stays left. I've tried padding but that messes up the JQuery bit.
I just want it centred under my title and to stay centred when scrolled.
I've tried text-align:center, I've tried creating a new div id with rules margin:auto; text-align:center; but it just wont centre.
can anybody help?

Heres the code i have

JQuery

<script>
  $(function() {
  var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
 
  var sticky_navigation = function(){
  var scroll_top = $(window).scrollTop(); // our current vertical position from the top
 
  if (scroll_top > sticky_navigation_offset_top) {
  $('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });
  } else {
  $('#sticky_navigation').css({ 'position': 'relative' });
  } 
  };
 
  sticky_navigation();
 
  $(window).scroll(function() {
  sticky_navigation();
  });
}); 
  </script>

Code (markup):

HTML

<div id="demo_top_wrapper">
  <!-- a header with a logo just to have some content before the menu -->
 
  <!-- this will be our navigation menu -->
  <div id="sticky_navigation_wrapper">
 
  <div id="sticky_navigation">
  <div class="demo_container">
 
  <div id="demo_container">
 
 
  <ul>
  <li><center><a href="#">About Me</a></center></li>
  <li><center><a href="#">My Work</a></center></li>
  <li><center><a href="#">Experience</a></center></li>
  <li><center><a href="#">Contact Me</a></center></li>
 
  </ul>
  </div>
  </div>
  </div>
  </div>
</div><!-- #demo_top_wrapper -->

HTML:

CSS

#demo_container { margin:auto; text-align:center; }
.demo_container { width:980px; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
/* our menu styles */
#sticky_navigation_wrapper {  margin:0 auto; width:100%; height:50px; }
#sticky_navigation { text-align:center; margin:auto; width:auto;  height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

Code (markup):

 

If you want the sticky navigation to center you need to set a width to it and then set margin:0 auto;

 

I did that and it still didnt work

 

I'm not going to comment your methods as I usually would, but seriously -- 5 wrapper DIV (for the record, it needs NONE) with only one child and each having a class and/or ID means you just didn't grasp inheritance. There's jQuery, so that partially explains it, but don't worry, that CENTER atrocity won't help center anything, much less when it's used in 2013. I always laugh when I see that type of comment: <!-- this will be our navigation menu -->. Not sure if you realized, but you've got an ID named "sticky_navigation". That's the reason we don't call them D6e617669676174696f6e (that says "navigation" in base16).

Now, back to your problem. The non-centering is a float problem, but then you have a huge amount of useless properties that overwrite the good ones, some are declared 7 times. Losing the float is a step, but it's not enough. You have to get rid of width:980px, then you would have to apply display:inline-block to your LI, get rid of a number of margins, and give your UL text-align:center.
In one sentence, you should get rid of this trash and start over. There's really nothing worth salvaging here.

 

HEY!!! That's my line.

... and a spot on assessment.