Выровняйте два divs горизонтально (один на крайнем левом, а другой на крайнем правом краю контейнера)

Я работаю над игровым сайтом и хочу разместить два div внутри div 'header' таким образом, чтобы они были выровнены по горизонтали, а слева и справа от этого контейнера div. Ниже приведен пример:

Oli                                                                             Matt

Вот моя попытка. Какая у меня ошибка?

HTML:

<div class="header">
     <div class="playerOne">
     Oli
     </div>
     <div class="playerTwo">
     Matt
     </div>
</div>

CSS

.header{
  display: inline-block;
}
.playerOne{
    margin-left: 0;
 }

.playerTwo{
  margin-right: 0;
}

Ответ 1

display:inline-block не создаст проблему float, поэтому нет необходимости добавлять clearfix
Вы также можете использовать overflow:hidden вместо display:inline-block

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid red;
}
.playerOne {
  float: right;
}
.playerTwo {
  float: left;
}

<div class="header">
  <div class="playerOne">
    Oli
  </div>
  <div class="playerTwo">
    Matt
  </div>
</div>

Ответ 2

Проблема заключается в том, что вы не нацеливаете собственный элемент встроенного блока.:)

.header > div{
  display: inline-block;
}
.playerOne{
  float:right;
}

Ответ 3

Возможно использование float?

.playerOne{
    float: left
 }

.playerTwo{
  float: right
}

http://jsfiddle.net/dfLa5nmL/

Ответ 4

упростите с помощью flex

.wrapper{ display: flex; justify-content: space-between }

<div class="wrapper"><span>1</span><span>2</span></div>