0

Не работает justify-content: flex-end

head {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  padding-left: 150px;
  width: 100%;
  height: 72px;
  background-color: #000000;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.menu li {
  padding-left: 45px;
  color: #ffffff;
  list-style: none;
  opacity: 0.69;
}
<header class="header">
  <div class="logo">
    <img src="img/Logo.png">
  </div>
  <nav class="navigation">
    <ul class="menu">
      <li>Features</li>
      <li>About</li>
      <li>Pricing</li>
      <li>Reviews</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>
<section class="form_template">
  <div class="title">

  </div>
  <div class="subtitle">

  </div>
  <div class="text">

  </div>
  <button class="download">
        				
        			</button>
  <form class="free_trial">
    <p></p>
    <input type="text" name="1">
    <input type="text" name="2">
    <input type="text" name="3">
    <button class="get_started">
        					
        				</button>
  </form>
</section>

1 ответ 1

0

Нужно править стили:

head, body {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
  background-color: #000000;
}

.logo {
  padding-left: 150px;
}

.navigation {
  flex: 1;
  padding-right: 8px;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.menu li {
  padding-left: 45px;
  color: #ffffff;
  list-style: none;
  opacity: 0.69;
}
2
  • Спасибо большое 31 мар 2020 в 19:30
  • Незашта. Кстати, тут еще принято правильные ответы, вернее - лучший из правильных, отмечать как принятый.
    – Majestio
    31 мар 2020 в 19:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.