Alinhamento de elemento de bloco com recuo à esquerda em CSS

O valor auto para margin na verdade pode fazer mais do que apenas centralizar. Essencialmente, esse valor permite calcular a margem automaticamente e torná-la a máxima possível. Quando aplicamos auto para as margens esquerda e direita - o elemento é centralizado.

No entanto, é possível aplicar apenas a margem esquerda. Nesse caso, o elemento receberá o recuo máximo possível à esquerda e ocupará a posição extrema direita:

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* define a margem esquerda automática */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: