Untitled

<!DOCTYPE html>
<html>

<head>
	<title>Some text</title>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" href="css/main.css">
</head>

<body>
	<div class="main-block">
		<div class="main">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</div>
</body>
</html>


html, body {
    padding: 0;
    min-height: 100%;
    font-size: 14px;
    width: 100%;
    background-color: white;
    margin: 0;
}
p {
    margin: 3px;
}
div {
    box-sizing: border-box;
}
.main-block {
    width: 90%;
    margin: 1% 5%;
    background: gray;
    padding-top: 1%;
}
.main {
    width: 90%;
    margin: 1% 5%;
    background: #cbdba6;
    padding-top: 1%;
    text-align: center;
}

.item {
    width: 10%;
    height: 150px;
    border: 1px solid white;
    background: red;
    display: inline-block;
    float: left;
}

.main::after {
    content: " ";
    clear: both;
    display: block;
}


@media screen and (max-width: 1000px) {
    .main-block, .main {
        margin: 1% auto;
        width: 95%;
    }
    .item {
        width: 32%;
    }
}