Создание простой разметки страницы
Никак не врублюсь во флексбокс. Есть вот такая разметка:
<!doctype html>
<html>
<head>
<title>Flexbox layout</title>
<style>
body {
display: flex;
}
footer aside.contacts a img {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<header>
<img src="https://fakeimg.pl/2000x100/?text=First+banner" />
<img src="https://fakeimg.pl/2000x100/?text=Second+banner" />
</header>
<nav>
<div class="breadcrumbs">
<a href="/">Main</a>
/
<a href="/inner">Inner</a>
</div>
<form class="search-form">
<input type="search" name="query" />
<button type="submit">Search</button>
</form>
<h1 class="page-header">Flexbox layout</h1>
</nav>
<main>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<aside class="icons">
<img src="https://fakeimg.pl/100x100/?text=First+icon" />
<img src="https://fakeimg.pl/100x100/?text=Second+icon" />
</aside>
</main>
<footer>
<section class="banners">
<img src="https://fakeimg.pl/2000x100/?text=First+banner" />
<img src="https://fakeimg.pl/2000x100/?text=Second+banner" />
</section>
<aside class="copyrights">
© My, 2020
</aside>
<aside class="contacts">
<a href="https://vk.com" target="_blank"><img src="https://vk.com/favicon.ico"/></a>
<a href="https://www.instagram.com" target="_blank"><img src="https://www.instagram.com/favicon.ico"/></a>
</aside>
</footer>
</body>
</html>
Мне надо чтобы весь контент страницы (вместе с хедером и футером) был ужат процентов до 80 примерно. Ну вот как на stackoverflow, например. То есть отступы большие слева и справа. Сверху хедер, под ним nav, под ним article, а вложенный в main aside справа от article (процентов на 20 от main в ширину). В футере сначала на весь футер section, а потом слева копирайты, справа контакты.
Помогите пожалуйста!