css shapes have trouble with putting nav bar over it

Question

im using shapes and im not able to get li to show up on right side

         * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

    body{
    padding: 0;
      margin: 0;
     background-image: url(hd.jpg);

  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }

    .menu{
       float:left;
      display: inline-block
     }

     .menu ul{list-style: none;
     padding: 0;
       margin: 0;
     }

     .menu ul li {display: inline-block;
        font-family: 'Playfair Display', serif;
       font-weight: 700;
       font-size: 17px;
       text-transform:capitalize;
       color: gainsboro;


     padding: 20px; 
     }

    .rightmenu ul li a{color: white;}



    .menu1{
       float:right;
      display: inline-block
     }

     .menu1 ul{list-style: none;
     padding: 0;
       margin: 0;
     }

     .menu1 ul li {display: inline-block;
        font-family: 'Playfair Display', serif;
       font-weight: 700;
       font-size: 17px;
       text-transform:capitalize;
       color: red;


     padding: 20px; 
     }

    .rightmenu ul li a{color: white;}


.c-1 {
  background: #333;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 365px;
  width: 1200px;
  box-shadow: 0 25px 30px rgba(0,0,0,.5);
}

.c-2 {
  float: left;
  width: 40%;
  position: relative;
  color: #fff;
  padding: 50px;
}

.bg-image {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background-image: url(file.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
}

section {
  position: absolute;
  color: #f00;
}

.diagonal {
  position: relative;
  z-index:1;
}

.diagonal:after {
  right: 0;
  left: 100px;
  position: absolute;
  -webkit-transform: skewX(-15deg) rotate(180deg);
  -ms-transform: skewX(-15deg) rotate(180deg);
  transform: skewX(-15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background: #333;
  z-index:-1;
}

    }


          ```

 ```html
          <!<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>
my webpage
</title>

  </head>




  <body> 
<section class="c-1">
 <nav class="menu">
   <ul>
     <li>menu</li>

   </ul>
 </nav>
 <nav class="menu1">
   <ul>
     <li>know about us</li>
     <li>contact</li>
   </ul>
 </nav>
  <div class="c-2 diagonal">

    <h1>
    Work with us
    </h1>
    <p>
      Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non
      scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse
      mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a.
    </p>
  </div>
  <div class="bg-image"></div>
</section>



      </body>

          ```

Welcome to the Treehouse Community

Looking to learn something new?

Brian Diggs

Brian Diggs

css shapes have trouble with putting nav bar over it