Why can’t I center with margin: 0 auto?

by

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I’ve seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

More Related Contents:

  1. CSS margin terror; Margin adds space outside parent element [duplicate]
  2. Why does this CSS margin-top style not work?
  3. How wide is the default “ margin?
  4. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  5. How to remove margin space around body or clear default css styles
  6. Removing body margin in CSS
  7. CSS margin adds space outside parent element [duplicate]
  8. Margin top in inline element
  9. How to align two elements on the same line without changing HTML
  10. Why would margin not be contained by parent element?
  11. Why doesn’t “margin: auto” center an element vertically?
  12. `margin:auto;` doesn’t work on inline-block elements
  13. CSS Margin: 0 is not setting to 0
  14. CSS Cell Margin
  15. Is there any way to add padding to select options via CSS?
  16. Align a div to center
  17. Can't remove text decoration
  18. Why my HTML input field is ‘readonly’ by default [closed]
  19. Bootstrap height
  20. What are the implications of using “!important” in CSS? [duplicate]
  21. Why is vertical-align: middle not working on my span or div?
  22. How to remove unwanted space between rows and columns in table?
  23. Why are button’s discouraged from navigation?
  24. Using display inline-block columns move down
  25. How to disable the resize grabber of ? [duplicate]
  26. Is this empty space actually margin-right which is not recognized by dev tools?
  27. How do I give a CSS class priority over an id?
  28. Padding the top and the bottom of inline element
  29. how to remove the dotted line around the clicked a element in html
  30. Is it possible to achieve a -like effect without using the tag?

Leave a Comment