Как регулировать контейнер ширины Flexbox?

Question

[DanilChekh]

Подскажите,начал изучать флексбоксы, хочу чтобы меню одно было слева прижато а второе справа,независимо от ширины экрана,немогу понять почему контейнер на всю ширину(цвет темно синий по всей ширине,) а первому списку ставлю флекс старт он правильтно прижат а второму флекс енд,он же по идее должен быть в конце контейнера?

И почему контейнер имеет по бокам небльшие белые зоны?
Код контейнера

.row{    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-left: auto;
  margin-right: auto;
background-color: blue;}

Код списков

.navigation {
  list-style: none;
  margin: 0;
  background: deepskyblue;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  justify-content: flex-start;
}

У второго только justify-content: flex-end;

Еще вопрос justify-content: должен выравнивать елементы по началу или концу контейнера,но тут они просто идут последовательно, в чем проблема?

Поставил родителю свойство justify-content: space-between; Получил что хотел подскажите это правильное решение?И все еще вопрос про белые полосы по бокам контейнера row

Все разобрался надо было скинуть margin у боди тега.Я просто люблю паниковать)

Comments

[DTX]

Для начала можно научится пользоваться codepen.io и отмечать решения к своим вопросам.

Answer 1

[zoozag]

justify-content: должен выравнивать елементы по началу или концу контейнера

По началу или концу контейнера, а не родителя.
Вы его перепутали с justify-self