Question

For some reason my divs won’t center horizontally in a containing div:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

And sometimes there is a row div with just one block div in it. What am I doing wrong?

Answer 1

To achieve what you are trying to do:

Consider using display: inline-block instead of float.