header 和 main, tags 怎么划分？

Question

我刚刚创建了一个 header，在主要部分之后，我的主要部分在 header 中，我试图从顶部留出空白，但对我来说不起作用。我制作了一个屏幕来显示我的问题：我需要 divide header 和 main，for main for ex。顶部边距为 header。我还设置了两个显示块，但没有用。不应该使用主标签或切换到 div 元素吗？这是我的 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Microsoft Windows</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="favicon/microsoft32.png">
</head>
<body>
    <header>
        <ul id="header-left">
            <li><a href="#">Microsoft Windows</a></li>
        </ul>
        <ul id="header-right">
            <li><a href="#">Explore Windows 11</a></li>
            <li><a href="#">Shop devices</a></li>
            <li><a href="#">Download</a></li>
        </ul>
    </header>
    <main>
        <div id="hero">
            <div id="hero-text">
                <h2>Made for you, designed for all</h2>
            </div>
        </div>
    </main>
</body>
</html>

和我的 css :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Source+Sans+Pro:wght@300;400&display=swap');

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    width: 70%;
    margin: auto;
}

header {
    margin-top: 5%;
    display: block;
}

header ul {
    width: fit-content;
}

header #header-left {
    float: left;
    font-family: 'Poppins', sans-serif;
}

header #header-right {
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
}

header #header-right li {
    margin-right: 25px;
}

header #header-right li:last-child {
    margin-right: 0px;
}

header ul li {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

header #header-right li::after {
    display:block;
    content: '';
    border-bottom: solid 2px black;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

header #header-right li:hover:after { transform: scaleX(1); }

header #header-right li::after {
    transform-origin: 0% 50%;
}

header ul li a {
    color: black;
}

main {
    display: block;
}

Answer 1

try this it will help you

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Source+Sans+Pro:wght@300;400&display=swap');

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    width:100%;
    margin: 0;
}
.conatiner{
margin:auto;
max-width:1200px;
width:100%;
}
header {
float:left;
width:100%;

}
.navbar{
float:left;
width:100%;
padding:10px;
background:#eee;
}
header ul {
    width: fit-content;
}

header #header-left {
    float: left;
    font-family: 'Poppins', sans-serif;
}
.navbrand{
line-height:35px;
}
header #header-right {
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
}

header #header-right li {
  padding:10px;
  font-size:14px;
}

header #header-right li:last-child {
    margin-right: 0px;
}

header ul li {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

header #header-right li::after {
    display:block;
    content: '';
    border-bottom: solid 2px black;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

header #header-right li:hover:after { transform: scaleX(1); }

header #header-right li::after {
    transform-origin: 0% 50%;
}

header ul li a {
    color: black;
}

main {
float:left;
width:100%;

}
#hero{float:left;
width:100%;
padding:1em;
text-align:center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Microsoft Windows</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="favicon/microsoft32.png">
</head>
<body>

    <header>
    <section class="navbar">
           <section class="conatiner">
          <a href="#" class="navbrand">Microsoft Windows</a>
      
        <ul id="header-right">
            <li><a href="#">Explore Windows 11</a></li>
            <li><a href="#">Shop devices</a></li>
            <li><a href="#">Download</a></li>
        </ul>
          </section>
        </section>
    </header>
    <section class="conatiner">
    <main>
        <div id="hero">
            <div id="hero-text">
                <h2>Made for you, designed for all</h2>
            </div>
        </div>
    </main>
    </section>
</body>
</html>

header 和 main, tags 怎么划分？

How to divide header and main, tags?

html

css

header

main