Bymas | Не хочет работать



<body>

        <nav>

            <ul>

                <li><a href="#section1">1</a></li>

                <li><a href="#section2">2</a></li>

                <li><a href="#section3">3</a></li>

                <li><a href="#section4">4</a></li>

                <li><a href="#section5">5</a></li>

            </ul>

        </nav>

        <section id="section1">

            <h2>section 1</h2>

        </section>

        <section id="section2">

            <h2>section 2</h2>

        </section>

        <section id="section3">

            <h2>section 3</h2>

        </section>

        <section id="section4">

            <h2>section 4</h2>

        </section>

        <section id="section5">

            <h2>section 5</h2>

        </section>

    </body>

Не хочет работать псевдо nth-child



* {

    padding: 0;

    margin: 0;

}

ul {

    list-style: none;

}

a {

    text-decoration: none;

}

body {

    font-family: 'Autour One', cursive;

    font-size: 1.5em;

}

nav {

    width: 100%;

    position: fixed;

    top: 0px;

    left: 0px;

    right: 0px;

    overflow: hidden;

}

nav ul {

    display: flex;

    justify-content: space-around;

}

nav li {

    background: #ccc;

    display: inline-block;

    width: 20%;

}

nav a {

    display: block;

    text-align: center;

    padding: 10px 0px; 

    background: #fff;

}

nav a:nth-child(2) {

    background: #ccc;

    color: #fff;

}

section {

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-transform: uppercase;

    clear: both;

}

section:nth-child(1) {

    background: #cc6e6b;

}

section:nth-child(2) {

    background: #6bbcc2;

}

section:nth-child(3) {

    background: #418b6b;

}

section:nth-child(4) {

    background: #3a5ca6;

}

section:nth-child(5) {

    background: #d78131;

}

Есть смелые решить проблему за +!!!