<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>«Резиновая» верстка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mainWrapper">
<div id="headerContainer">
<div>Мелкий текст заголовка</div>
<h3>«Резиновая»</h3>
<hr>
</div>
<div id="previewsContainer">
<div><img src="01.png"></div>
<div><img src="02.png"></div>
<div><img src="03.png"></div>
<div><img src="04.png"></div>
<div><img src="05.png"></div>
<div><img src="06.png"></div>
<div><img src="07.png"></div>
<div><img src="08.png"></div>
</div>
<div id="footerContainer">
<hr>
<div>© Василий Пупкин</div>
</div>
</div>
</body>
</html>
html, body { width: 100%; margin: 0; padding: 0; font-family: Arial, Tahoma, Verdana; text-align: center; }
div { box-sizing: border-box; overflow: hidden; }
#mainWrapper { width: 100%; max-width: 920px; margin: auto; padding: 20px; }
#headerContainer div { margin-top: 20px; font-size: 12px; }
#headerContainer h3 { margin: 0; font-size: 40px; }
#headerContainer hr { height: 1px; margin: 10px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
#previewsContainer div { float: left; width: 23.5%; margin: 20px 1% 0px 1%; }
#previewsContainer div img { display: block; width: 100%; }
#previewsContainer div:nth-of-type(4n+1) { margin-left: 0px; }
#previewsContainer div:nth-of-type(4n+4) { margin-right: 0px; }
#footerContainer hr { height: 1px; margin: 30px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
#footerContainer div { font-size: 12px; }
Результат выполнения задания можно посмотреть
здесь.