Как отцентрировать заголовок с помощью CSS?

Question

Я создал меню navbar, используя flex box, без фреймворка, только html и csss, без начальной загрузки или основы. Вот как я хочу выглядеть: \

здесьэто HTML:

ul,
nav {
  list-style: none;
}

.Navbar {
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  background-color: orange;
}

.Navbar__Link {
  padding-right: 30px;
  font-family: ProximaNova;
  font-size: 18px;
  color: #fff;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<header>
  <div class="Navbar">
    <div class="Navbar__Link Navbar__Link-brand">
      Dronezone
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link">
        Home
      </div>
      <div class="Navbar__Link">
        About
      </div>
      <div class="Navbar__Link">
        Pricing
      </div>
      <div class="Navbar__Link">
        Our drones
      </div>
      <div class="Navbar__Link">
        Our Realization
      </div>
      <div class="Navbar__Link">
        Contact
      </div>


    </nav>
  </div>
</header>

вот jsfidle: http://jsfiddle.net/jyc7Lkh4/ Примечание: маргинальный пробел, но у меня проблема при попытке отклика

что мне нужноизменить, чтобы получить то, что я хочу?

Answer 1

Перемещение background-color: orange с .Navbar на header.

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

body {
    position: relative;
}

header {
    background-color: orange;
    width: 100%;
    height: 80px;
}

.Navbar {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

Answer 2

ul,
nav {
  list-style: none;
}
header {
    position: relative;
    background-image: linear-gradient(to right, rgb(202, 12, 12,1), rgba(255,0,0,1));
}
.Navbar {
    display: flex;
    padding: 16px;
    font-family: sans-serif;
    color: white;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.Navbar__Link {
  padding-right: 30px;
  font-family: ProximaNova;
  font-size: 18px;
  color: #fff;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<header>
  <div class="Navbar">
    <div class="Navbar__Link Navbar__Link-brand">
      Dronezone
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link">
        Home
      </div>
      <div class="Navbar__Link">
        About
      </div>
      <div class="Navbar__Link">
        Pricing
      </div>
      <div class="Navbar__Link">
        Our drones
      </div>
      <div class="Navbar__Link">
        Our Realization
      </div>
      <div class="Navbar__Link">
        Contact
      </div>


    </nav>
  </div>
</header>

Answer 3

Для центрирования НАВИГАЦИИ здесь.Вы должны назначить определенную ширину для вашего .Navbar (который в этой модификации, которую я сделал, состоит в том, что я назначил ее шириной: 960px; и добавил поле: 0 auto; для его центрированного положения. Я также перенесу фон в HEADER.)

ul,
nav {
  list-style: none;
}
/* Changes I Make */
header {
  background-color: orange;
}

.Navbar {
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  width: 960px; /* Added Code */
  margin: 0 auto; /* Added Code */
}

.Navbar__Link {
  padding-right: 30px;
  font-family: ProximaNova;
  font-size: 18px;
  color: #fff;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<header>
  <div class="Navbar">
    <div class="Navbar__Link Navbar__Link-brand">
      Dronezone
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link">
        Home
      </div>
      <div class="Navbar__Link">
        About
      </div>
      <div class="Navbar__Link">
        Pricing
      </div>
      <div class="Navbar__Link">
        Our drones
      </div>
      <div class="Navbar__Link">
        Our Realization
      </div>
      <div class="Navbar__Link">
        Contact
      </div>


    </nav>
  </div>
</header>