Justify-content：空格之间的作品不正确答案

【问题标题】：Justify-content: space-between works incorrectJustify-content：空格之间的作品不正确
【发布时间】：2020-04-22 01:36:18
【问题描述】：

我有以下代码

header {
  width: 100%;
  height: 65px;
  background: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #252c3a;
}

#menu {
  width: 100%;
  display: flex;
  margin-left: 28%;
}

#menu div {
  width: 100px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

<header>
  <div id="logo">
      <img src="img/header/logo.png" alt="Logo">
  </div>
  <div id="menu">
      <div>Home</div>
      <div>Club-Life</div>
      <div>Training</div>
      <div>Instructors</div>
      <div>Contact</div>
  </div>

Chrome inspect

其他块的宽度是 100%，但标题宽度比下面的块大。我使用 justify-content: space-between。

【问题讨论】：

最终结果应该是什么样子？

标签： html css flexbox responsive

【解决方案1】：

删除width & margin

在头部添加flex-wrap

header {
    width: 100%;
    height: 65px;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #252c3a;
    flex-wrap:wrap;
}

#menu {
    display: flex;
    flex-wrap:wrap;
}

【讨论】：

【解决方案2】：

我们需要做的事情很少：

在标题中：

1. Remove width

在#main:

1. Remove width
2. Remove margin

在#menu div中：

1. Remove everything and just add margin left

演示： https://codepen.io/Bibeva/pen/povddJr

最终代码：

header {
    height: 65px;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #252c3a;
}

#menu {
    display: flex;
}

#menu div {
    margin: 0 0 0 30px;
}

【讨论】：

【解决方案3】：

#menu {
    display: flex;
}

就是这样，你可以试试这个吗？

【讨论】：