error menu drodown css html <nav> <ul>

Question

I am creating a page where there is a menu that contains a submenu centered at the top of the page, my problem is being to centralize the submenu with the main menu, because it always goes out of alignment, does anyone know what it can be? Thank you in advance for any help! "ps:in the image contains the visible error"

edit1:run and with the link and with the html that was missing. link: https://testtestteste111111.000webhostapp.com/

 .menu{
 width:100%;
 height:49px;
 background-color:#494545;
 font-family:'Arial';
 position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index:9999;
  }
 .menu ul{
 list-style:none;
position:relative;
margin-left:24%;
}
.menu ul li{
 width:150px;
  float:left;
  }
 .menu a{
 padding:15px;
 display:block;
 text-decoration:none;
 text-align:center;
 background-color:#494545;
 color:#fff;
  }
 .menu ul ul{
 position:absolute;
 visibility:hidden;
 }
.menu ul li:hover > ul{
  visibility:visible;
 /* border:1px solid #901E93; sub div*/
  }
  .menu a:hover{
  background-color:#7F818D;
color:#fff;
 }
  .menu ul ul li{
     float:none;
     border-bottom:solid 1px #ccc;
     margin-left:-164%;
     }
     .menu ul ul li a{
         background-color:#646464;
         }
         label[for ="bt_menu"]{
             padding:5px;
             background-color:#494545;
             color:#fff;
             font-family:"Arial";
             text-aling:center;
             font-size:30px;
             cursor:pointer;
             width:100%;
             max-height:58px;
             z-index:9999;

margin-top:-10px;
top:-5px;
        display:none;
        position:fixed;
         }
         .imgbar{
             max-height:25px;
             max-width:25px;
             margin-top:10px;
         }
         #bt_menu{
             display:none;
           }
   @media(max-width:800px){
   label[for="bt_menu"]{
   display:block;
    color:#fff;
    z-index:9999;
   position:fixed;
   margin-top:1px;
   }
   .menu{
    margin-top:-1px;
    margin-left:-100%;
    transition:all .4s}
    #bt_menu:checked ~ .menu{
        margin-left:0;}
    .menu ul li{
    width:100%;
    float:none;}
    .menu ul ul{
        position:static;
        overflow:hidden;
        max-height:0;
        transition:all .4s;
    }
    .menu ul li:hover ul{
        height:auto;
        max-height:200px;
    }
  .menu ul{
 list-style:none;
 position:relative;
margin-left:0;
z-index:9999;
}
.menu ul ul li{
     float:none;
     border-bottom:solid 1px #ccc;
     margin-left:0;
     }
     .parallax { 
        width:100%;
/* The image used */
background-image: url(../img/img1.jpg);

/* Set a specific height */
height: 800px; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-50px;
  }
#ultopo{
margin-top:49px;
}}
html
<input type="checkbox" id="bt_menu">
<label for="bt_menu"><img class="imgbar" src="img/bars.svg"></img></label>
<nav class="menu">
  <ul id="ultopo">
   <li><a  href="#">Home</a></li>
   <li><a href="#">Serviços</a>

  <!-- nested UL in LI -->
  <ul>
    <li><a href="#">ex:A</a></li>
    <li><a href="#">ex:b</a></li>
   </ul>
    </li>
    <li><a href="#">Atuaçao</a>
  <!-- nested UL in LI -->
  <ul>
    <li><a href="#">ex:A</a></li>
    <li><a href="#">ex:B</a></li>
    <li><a href="#">ex:C</a></li>
  </ul>   
    </li>    
    <li><a href="#">contato</a></li>
   </ul>
   </nav>

Answer 1

Please update css

Here is link https://jsfiddle.net/jbv09vy4/1/

Add css

.menu ul li {
    position: relative;
}
.menu ul ul {
    left: 0;
    margin: 0;
}

and remove styles margin-left: -164% from

.menu ul ul li {
    float: none;
    border-bottom: solid 1px #ccc;
    margin-left: -164%;
}