Как убрать лишнее пространство слева от контейнера, если установка поля и отступа в 0 не работает?

Question

Я пытаюсь создать панель навигации, но не могу избавиться от лишнего пространства слева от контейнера с логотипом. Как я могу удалить это место?

Я пытался установить поля и отступы на 0, но ни один из них не работал.

Вот изображение того, о чем я говорю. Я добавил красные рамки, чтобы было легче понять, где находятся контейнеры:

Вывод должен иметь логотип полностью слева от контейнера меню. Там не должно быть лишних пробелов.

.center-container{
   max-width: 960px;
   margin: 0 auto;
   margin-top: 1rem;
}

menu{
   background-color: cadetblue;
   display: flex;
   justify-content: space-between;
}

.logo{
   height: 1.5rem;
   margin-right: 1rem;
}

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

<header>
  <menu class="center-container">
    <div class="logo-container">
      <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/tortoiseshell-optics/resources/images/logo-white.png">
      <span>Tortoiseshell Optics</span>
    </div>
  </menu>
</header>

Answer 1

<menu> элементы, как правило, оформляются как элементы <ul> браузером с левым отступом. Удалите его, и вы избавитесь от места:

.center-container {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 1rem;
}

menu {
  background-color: cadetblue;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

.logo {
  height: 1.5rem;
  margin-right: 1rem;
}

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

<header>
  <menu class="center-container">
    <div class="logo-container">
      <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/tortoiseshell-optics/resources/images/logo-white.png">
      <span>Tortoiseshell Optics</span>
    </div>
  </menu>
</header>

Также обратите внимание, что поддержка для <menu> весьма ограничена.

Answer 2

.center-container {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 1rem;
  padding: 0;
}

menu {
  background-color: cadetblue;
  display: flex;
  justify-content: space-between;
}

.logo {
  height: 1.5rem;
  margin-right: 1rem;
}

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

<header>

  <menu class="center-container">

    <div class="logo-container">

      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/tortoiseshell-optics/resources/images/logo-white.png" class=logo>

      <span>Tortoiseshell Optics</span>

    </div>

  </menu>

</header>