Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Flask Blog</title>
</head>
<body>
    <div class="header" id="header">
        <div class="menu" id="menu">
            <ul class="list" id="list">
                <li class="blog"><a href="index.html">Блог</a></li>
                <li class="about"><a href="about.hmtl">Обо мне</a></li>
                <li class="login"><a href="login.html">Войти</a></li>
            </ul>
        </div>
        <div class="name-of-blog" id="name-of-blog">
            <h1>KOT_Mapku3</h1>
        </div>
        <div class="icons">
            <ul class="social">
                <li class="vk" id="vk"><a href="vk.com"></a></li>
                <li class="instagram" id="instagram"><a href="inst.com"></a></li>
                <li class="facebook" id="facebook"><a href="facebook.com"></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

// Code goes here

body,
div,
ul,
li,
a,
h1, h2, h3, h4, h5, h6,
img,
p {
  padding: 0;
  margin: 0; }

.header {
  margin: 0 auto;
  margin-top: 5em;
  width: 50%;
  padding-right: -5px;
  border: 2px solid red; }
  @media (max-width: 800px) {
    .header {
      width: 100%; } }
  .header .menu {
    display: inline-block;
    border: 2px solid red; }
    @media (max-width: 800px) {
      .header .menu {
        display: block;
        margin: 0 auto; } }
    .header .menu .list {
      display: inline;
      height: 100%; }

.list li {
  display: inline-block;
  list-style: none;
  width: 5em;
  text-align: center;
  font-family: "open sans condenced", sans-serif; }

.name-of-blog {
  display: inline-block;
  margin: 0 auto;
  font-family: "Helvetica", "Arial", sans-serif; }
  .name-of-blog h1 {
    margin: 0 auto; }

.icons {
  display: inline-block; }
  @media (max-width: 800px) {
    .icons {
      display: block; } }
  .icons .social {
    margin: 0 auto;
    display: inline-block;
    border: 2px solid yellow; }
    .icons .social li {
      display: inline-block;
      list-style: none;
      width: 5em;
      height: 1.5em; }

/*# sourceMappingURL=header.css.map */