html - CSS Flexbox 导航和边距

Question

基于应用了 display: flex 的列表的简单导航。第一个元素移到了左侧，但由于某种原因，我在右侧得到了一个 "space"。

我无法确定这是 margin 还是 padding 以及是哪个元素导致的。 Chrome 中的代码检查器表明它可能是 ul margin-block-start 但是，我不明白它来自哪里，也不知道如何摆脱

* {
    box-sizing: border-box;
}

:root {
    font-size: 18px;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {

    text-rendering: geometricPrecision;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #363636;
    font-size: 1em;
    overflow-x: hidden
        /*Chrome*/
}

nav {
    position: fixed;
    width: 100%;
    border: dotted green;
    background-color: #eb1734;
    padding: 2rem;
    z-index:99;
}

nav>ul {
    display: flex;
    justify-content: flex-end;
    border: dotted yellow;
    margin: 0
}

nav>ul>li {
    list-style-type: none;
}

.logo {
    margin-right: auto;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}



.wrapper {
    padding: 0 1rem;
}


.hero {

    width: 100vw;
    height: 100vh;
    max-width: 100%;
    /*to prevent the horizontal overflow*/
    background-color: #eb1734;
    color: #f6f6f6;
    display: table;
    /* and let the ancient aliens centre */

}

.hero h2 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1.6rem;
    text-transform: uppercase;
}

.subtitle {

    text-transform: none;
    font-weight: 500;
    font-style: italic;
}

.txt_sm {
    font-size: 0.98rem;
}

.txt_tm {
    font-size: 0.72rem;
}

h1 {
    font-size: 1.8rem
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.1rem
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

.arrow {
    display: table;
    position: absolute;
    bottom: 1em;
    left: 50%;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1em;
}

.arrow,
.arrow:visited {
    color: #f6f6f6;
}

.panel {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    background: #f6f7f8;
}

#welcome {
    text-align: center;
    color: #eb1734;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5em;
    padding: 4rem 0 3rem;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (-o-min-device-pixel-ratio: 1.25/1),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx) {}


@media (min-width: 1281px) {

    .wrapper {
        padding: 0 9rem;
    }

}

@media only screen and (max-width:1000px) {
    .grid {
        grid-template-columns: 1fr 1fr;

    }

}

@media only screen and (max-width:800px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

   <header>
        <nav>
            <ul>
                <li class="logo"><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
                <li><a href="#">Section 4</a></li>
                <li><a href="#">Section 4</a></li>
            </ul>
        </nav>
        <section class="hero">
            <h2><span class="title">Praesent elementum feugiat.</span><br>
                <span class="subtitle txt_sm">Suspendisse rhoncus sodales odio vel ultrices.</span>
            </h2>
            <a class="arrow" href="#welcome">&darr;</a>
        </section>
    </header>
    <div class="wrapper home">
        <section id="welcome">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis.</p>
        </section>
        <section id="about">
            <h2>Pellentesque viverra sapien</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
                vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
                Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
                Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
                turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
                dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
            <p>
                Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit. Nunc ultrices, odio vitae rutrum porta, velit eros sollicitudin leo, non tempus
                felis mi sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                inceptos himenaeos. Sed at gravida tellus, quis imperdiet metus. Cras vehicula tristique egestas. </p>
        </section>
        <h2>Vivamus mollis</h2>
        <section class="grid">

            <section>
                <h3>1</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>2</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>3</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>4</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>5</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>6</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
        </section>
    </div>
    <!--wrapper END-->
    <section class="panel">
        <div class="wrapper">
            <h3>Panel</h3>
            <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit.</p>
        </div>
        <!--wrapper END-->
    </section>
    <footer class="wrapper">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
            pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
            vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
            Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
            Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
            turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
            dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
    </footer>

Answer 1

将 padding:0 设置为 UL 这是浏览器的默认 css 样式，您需要通过将 padding:0 设置为 UL 来覆盖它