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">
				<input type="checkbox" id="male" checked disabled><label for="male">Male</label>

				<br>
				<select id="country" disabled>
					<option value="">Выберите страну</option>
					<option value="US">USA</option>
					<option value="DE">Germany</option>
					<option value="UA">Ukraine</option>
					<option value="FR">France</option>
				</select>

				<br>
				<a href="https://google.com" target="_blank">Google</a>
				<a href="https://gmail.com" target="_blank">MAIL</a>
				<input type="text" placeholder="Укажите свой email" disabled>
			</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;
}

input::placeholder {
    color: blue;
}


a:active {
    color: green;
}
a:visited {
    color: white;
}

a:hover {
    color: cornflowerblue;
    border: 1px solid cornflowerblue;
}

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