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

  
 <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; 
 }

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