标题/导航的样式-解网

问：

我有点迷茫。开始了一个新项目，我有一些问题。我怎样才能继续使网站负责？此外，任何关于（汉堡包和支票）的帮助都是值得赞赏的。因此，对于@media手机宽度 - 我希望汉堡菜单位于标题的右侧，当它打开时，它被替换为“x”符号。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../html/index.html">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
  <title>Nav</title>
</head>
<body>
  <header>
    <div class="logo-section">Loge-here</div>
      <input type="checkbox" id="toggle-button">
      <label for="toggle-button" class="show-menu-button">
      <i class="fas fa-bars"></i></label>
      <nav>
        <ul class="navigation">
          <li><a href="../html/index.html"></a>Home</li>
          <li><a href="#"></a>Catalogs</li>
          <li><a href="#"></a>Services</li>
          <li><a href="#"></a>Contacts</li>
          <label for="toggle-button" class="hide-menu-button">
          <i class="fas fa-times"></i></label>
        </ul>
      </nav>
  </header>
</body>
</html>

CSS代码：

header{
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgb(241, 232, 232);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(230, 230, 230);
  font-family: Roboto, arial;
}

.logo-section{
  color: white;
  background-color: blue;
  padding-top: 20px;
}

nav{
  background-color: red;
  color: white;
  padding-top: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; 
}

li {
  display: inline;
  color: black;
  float: left;
}

li a{
  padding: 30px 15px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

尝试了不同的方法，但不知何故，没有任何对齐/工作方式。在删除了我创建的代码的混乱之后，它又回到了这个。

HTML CSS FlexBox 标头导航栏

标题/导航的样式

Styling of header/nav

评论