Как отобразить элементы навигации в одной строке с помощью кнопки-переключателя?

Question

Итак, я получил домашнее задание из школы, чтобы создать целевую страницу нашего собственного дизайна.Я думал, что у меня есть меню наложения и помимо кнопки переключения, чтобы иметь три иконки в панели навигации (2 для социальных сетей и один для учетной записи пользователя).

У меня есть приведенный ниже код HTML и CSS, который позволяет мне использовать изображение в качестве кнопки переключения для меню наложения, которое прекрасно работает:

HTML

<header>
    <ul class="social">
        <li>
            <img src="/images/facebook.svg" alt="">
        </li>
    </ul>
    <a href="#" class="logo">MyWebSite</a>
    <img src="/images/menu.svg" alt="" class="menu-btn" id="open-menu">
</header>

CSS

header {
    padding: 2em;

    .logo {
        font-weight: bold;
        margin-left: 7em;
    }


    .menu-btn {
        float: right;
        cursor: pointer;
        width: 35px;
        margin-right: 7em;
    }

    .social {
        display: flex;
        float: right;
        list-style: none;
    }
}

Кроме того, я хотел бы добавить значки перед кнопкой меню переключения.Однако то, что я сейчас получаю, используя приведенный выше код, - это то, что вы можете видеть на приведенном ниже экране печати, который не является ожидаемым результатом:

Текущие результаты

Что яхотя бы получить, как показано на экране печати ниже:

Ожидаемые результаты Может кто-нибудь дать мне подсказку?Я бы оценил это.Спасибо

Answer 1

Вы можете использовать flexbox для создания нужного макета.

Пример

header {
  background-color: #ee4;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
}

.social-icons-container {
  display: flex;
  align-items: center;
}

.social-icons-container i {
  font-size: 20px;
  padding: 0 0 0 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<header>
  <h1>Logo</h1>
  <div class="social-icons-container">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
    <i class="fas fa-user-alt"></i>
    <i class="fas fa-bars"></i>
  </div>
</header>