Горизонтальный скролл

[Hasiev]

При построении сетки на flex-box, появляется горизонтальный скролл, как решить эту проблему?

Я так понимаю что из-за отрицательного правого маргина у row, но как тогда мне обнулять отступы слева у первого элемента, и справа у последнего?

Без nth-child не обойтись?

Спасибо!

 

https://jsfiddle.net/qLz87c4r/

https://codepen.io/anon/pen/JydmbY

 

Edited July 27, 2017 by Hasiev

[Igor Schnaider]

У вас тут расхождение:

.container {
	min-width: 1000px;
	padding: 0 10px;	/* ☜ */
	margin: 0 auto;
}

.row {
	display: flex;
	margin: 0 -15px;	/* ☜ */
}

Либо 10px, либо 15px.

[Hasiev]

2 минуты назад, Igor Schnaider сказал:

У вас тут расхождение:

.container {
	min-width: 1000px;
	padding: 0 10px;	/* ☜ */
	margin: 0 auto;
}

.row {
	display: flex;
	margin: 0 -15px;	/* ☜ */
}

Либо 10px, либо 15px.

Да, действительно, спасибо. Скажите, а где можно посмотреть как делают модульные сетки на флекс (не bootstrap 4)? Ничего толкового не нашел в гугле .. И как лучше задавать ширину колонкам, width, или flex-basis?