Centre sticky menu?

[danblukk]

Not quite sure what section to ask this question but I found a piece of code using script with css that allows me to have a menu which sticks to the top of the screen when you scroll down.

At the moment its alligned left and I want it centred under my title and to stay centred when you scroll down.

I've tried changing a few values and using padding but its creating problems and I figured there must be a easier to do it that I'm probly missing.

thank you

Script

<script>
  $(function() {
 
    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
     
    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
         
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
     } else {
            $('#sticky_navigation').css({ 'position': 'relative' });
        }  
    };
     
    // run our function on load
    sticky_navigation();
     
    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });
 
});  
   </script>

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">
                <ul>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">My Work</a></li>
                    <li><a href="#">Experience</a></li>
                    <li><a href="#">Contact Me</a></li>
       
                </ul>
            </div>
        </div>
    </div>
 
</div><!-- #demo_top_wrapper -->

CSS

.demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
#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 { width:100%; height:50px; }
#sticky_navigation { width:100%; 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; }