Проблема с CSS Border-box. Как это объяснить? [закрыто] ⇐ CSS

[Anonymous]

https://codepen.io/Eugene-73/pen/mybEbMW

Код: Выделить всё

body {
display: flex;
}

.section {
width: 1260px;
}

.speakers {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.speaker {
width: 418px;
/* Setting this to 420px makes the 3rd column wrap, why?
The 2px are from the border, why aren't they included in the 420px? */
box-sizing: border-box; /* Doesn't work??? */
display: block;
}

Код: Выделить всё

Наши эксперты



[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/6211.jpg[/img]
Татьяна Тен

[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18702.jpeg[/img]
Денис Ежков

[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18292.jpeg[/img]
Андрей Батусов

[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/16689.jpeg[/img]
Александр Беспоясов

[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/9998.jpeg[/img]
Константин Фокин

[img]https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/19697.jpeg[/img]
Виталий Гусаров

Проблема в том, что box-sizing: border-box не работает; и блоки сместятся вниз, если вы установите ширину 420 пикселей.
Если вы установите ширину 420 пикселей, блоки сместятся вниз. Почему??
Как это можно объяснить?

Подробнее здесь: https://stackoverflow.com/questions/792 ... plain-this