Why Can't I Center With Margin: 0 Auto

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

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;
}

CSS margin: 0 auto not centering

It is working.

The problem is you're centering a div, which is a block-level element by default, and which therefore occupies 100% width of its parent (body, in this case). So there's no space to move horizontally, hence no space to center.

For an illustration see this revised demo which has an added border around .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>
    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

Can't properly center things, and margin: 0 auto/margin:auto isn't working

It's because your box-sizing is content-box (the width of the element is calculated without adding the margin/padding/border).

To fix your problem, a simple way is to use border-box and apply it to all elements

* {
 box-sizing: border-box;
}

* { box-sizing: border-box;}.divvy {  position: absolute;  left: 50%;  top: 50%;  margin: -100px 0 0 -150px;}
#inputBox {  clear: both;  background-color: rgba( 0, 0, 0, 0);  border-color: rgba(0, 0, 0, 0);  color: #dbdbdb;  font-weight: bold;  width: 12em;  padding-left: 0.2em;  text-align: left;}
#title {  color: white;}
#formy {  color: #c6c6c6;  background-color: #727272;  background-color: rgba( 0, 0, 0, 0.5);  border-radius: 1.2em;  text-align: center;  padding: 0.35em 1.25em 0.75em 0.75em;  border: 0.1em solid;  border-color: #727272;  border-color: rgba(0, 0, 0, 0.3);  width: 100%;}

<div class="divvy" ng-repeat="slider in main.products">  <div>    <h3 align="center" id="title">TitleTitleTitle</h3>    <h4 align="center">Subtitle Subtitle Subtitle</h4>  </div>  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>    <fieldset id="formy">      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"        value="Resident">    </fieldset>    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">  </form></div>

Centering a div, margin: 0 auto; not working

It's because you are using position: absolute;. Change it to position: relative; and it will work.

margin: 0 auto is not centering

floated elements don't behave well with others

as it's a 3 column output, however, it's an easy fix

in general:

html:

<div class='leftColumn col'> ... </div>
<div class='rightColumn col'> ... </div>
<div class='centerColumn col'> ... </div>
<div class='clearFloats'></div>

css

.col { width:32%; }
.leftColumn { float:left; }
.rightColumn { float:right; }
.centerColumn { margin:0 auto; }
.clearFloats { clear:both; font-size:0; line-height: 0; height:0;}

You'll notice the extra "clearFloats" div ... if you don't clear the floats, strange layout issues can happen (not in this case though, it seems) -

I've posted https://jsfiddle.net/97nbtgtb/1/ which changes your markup/css somewhat like above, didn't add any clearing div, and just changed the css to effectively give the center col no float

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

My understanding is as follows (though I am happy to be corrected).

Inline elements do not have a width property, and so the "auto" cannot be calculated.
Block elements have a width property, so the width of the "auto" can be calculated.
Inline-block elements have an outside which acts inline, but an inside which acts like a block. As such, the width set acts more like the width of a word in an inline element.

Using Margin: auto; is not centering div

Okay, the way I fixed it is by changing the HTML and CSS

From <div class="col-md-3 sub admin"> to <div class="col-sm-3 admin"> I'm not totally sure if that contributed, but ¯_(ツ)_/¯

Then I changed the CSS to

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px; 
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 2px 2px 1px grey;
    background: white;
    background: -webkit-linear-gradient(#fff , #F1F1F1);
    background: -o-linear-gradient(#fff , #F1F1F1);
    background: -moz-linear-gradient(#fff , #F1F1F1);
    background: linear-gradient(#fff , #F1F1F1);
}

The only problems are that it looks a bit funky on tablet sized screens, and that it's not totally centralised. However, it works for now.

Why Can't I Center With Margin: 0 Auto