Flexbox + padding

by Bohdan Doroshenko

HTML

<!DOCTYPE html>
<html lang="ru">
	<head>
	<title>W3.CSS Template</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="flexbox.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
	</head>
	<body>
		<section>
			<div class="wrapper">
				<div class="row">
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
					<div class="col"><div>Some</div></div>
				</div>
			</div>
		</section>
	</body>
</html>

CSS

html, body {
	margin: 20px 0 0 0;
	background: #232323;
	color: #fff;
}

.wrapper {
	max-width: 1280px;
	padding: 0 15px;
	margin: 0 auto;
	border: 1px solid #ff0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.wrapper .col {
	border: 1px solid #fff;
	width: 8.3333%;
	min-height: 400px;
	box-sizing: border-box;
	text-align: center;
	padding: 0 15px;
}

.wrapper .col div {
	background: #777;
	min-height: inherit;
}