title: How to Center Menu on Responsive Checkbox Hamburger Menu
body: <p>I've successfully made an hamburger menu that only appears after a certain width, but the problem is that I would like the nav links to be centered, to occupy the whole page (here it stops once the links in the menu are done) and to have a different background color.
  Here's an example how the layout I'd like: <a href="https://i.stack.imgur.com/rGM3Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rGM3Z.png" alt="layout example"></a> 
  I've used CSSS and HTML only and would like to stick to these if possible.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="stylenav.css"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
          &lt;link href="css/font-awesome.min.css" rel="stylesheet"/&gt;
          &lt;link rel='icon' href='FAVICON.jpg' type='image/x-icon'/&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
          &lt;title&gt;AURORA CATERA 2020&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;header class="header"&gt;
              &lt;a href="index.html"&gt;&lt;img src="img/AURORA-YLOW-FIN copy.png" class="logo"&gt;&lt;/a&gt;
              &lt;input class="menu-btn" type="checkbox" id="menu-btn" /&gt;
              &lt;label class="menu-icon" for="menu-btn"&gt;&lt;span class="nav-icon"&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="#dont"&gt;ALL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#forget"&gt;STUFF&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#subscribe"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#comment"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://www.instagram.com/auroracatera" target="_blank"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/li&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/ul&gt;
  
  
          &lt;/header&gt;
  
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Poppins:900&amp;display=swap');
  @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300&amp;display=swap');
  @import url('https://fonts.googleapis.com/css?family=Raleway:500&amp;display=swap');
  @import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,600&amp;display=swap');
  @import url('https://fonts.googleapis.com/css?family=Rajdhani:400&amp;display=swap');
  
  
  body{
      margin:0;
      background-color:#000;
  }
  
  a{
      color:#F8E315;
      font-family: Rajdhani, sans-serif;
  }
  
  .header{
      background-color:rgb(153, 57, 57);
      position:fixed;
      width:100%;
      z-index:3;
  }
  
  .header ul{
      margin:0;
      padding: 20px 30px 0 0;
      list-style:none;
      overflow:hidden;
      background-color:rgb(0, 0, 0);
  }
  
  .header ul a{
      display:block;
      padding:20px;
      text-decoration:none;
  }
  
  .header ul a:hover{
     color:#c7c7c7; 
  }
  
  .header .logo{
      float:left;
      display:block;
      height: 62px;
      padding: 30px 0 0 40px;
  
  }
  
  .header .menu{
      clear:both;
      max-height:0;
      transition:max-height .2s ease-out;
  }
  
  .header .menu-icon{
      padding: 58px 20px;
      position:relative;
      float:right;
      cursor: pointer;
  }
  
  .header .menu-icon .nav-icon{
      background:#F8E315;
      display:block;
      height:2px;
      width:30px;
      border-radius: 2px;
      position:relative;
      transition:background;
  }
  
  .header .menu-icon .nav-icon:before{
      background: #F8E315;
      content:"";
      display:block;
      height:100%;
      width:100%;
      border-radius: 2px;
      position:absolute;
      top:10px;  
  
  }
  
  .header .menu-icon .nav-icon:after{
      background:#F8E315;
      content:"";
      display:block;
      height:100%;
      width:100%;
      border-radius: 2px;
      position:absolute;
      top:-10px;  
  
  }
  
  .header .menu-btn{
      display:none;
  }
  
  .header .menu-btn:checked ~ .menu{
      max-height:240px;
  
  }
  
  .header .menu-btn:checked ~ .menu-icon .nav-icon{
      background:transparent;
  }
  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
      transform: rotate(-45deg);
      top:0;
  }
  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
      transform: rotate(45deg);
      top:0;
  }
  
  @media (min-width:48em){
  
      .header li{
          float:left;
      }
  
      .header .menu{
          clear:none;
          float:right;
          max-height:none;
      }
  
      .header .menu-icon{
          display:none;
      }
  
  }
  
  
  </code></pre>