Div of the carousel is not in the center

I'm not able to leave this carousel fluid, as in the image below the% div is not catching carousel ul of div 100% that by default has sub-box

HTML

<divclass="box">
    <div class="sub-box">
        <h1>
            PRINCIPAIS
            <div class="b-slide">
                <span id="prev"><i class="fas fa-angle-double-left"></i></span>
                <span id="next"><i class="fas fa-angle-double-right"></i></span>
            </div>
        </h1>

        <div id="carousel" style="overflow:hidden;">
            <ul>
                <li><a href=""><div class="destaque">1</div></a></li>
                <li><a href=""><div class="destaque">2</div></a></li>
                <li><a href=""><div class="destaque">3</div></a></li>
                <li><a href=""><div class="destaque">4</div></a></li>
                <li><a href=""><div class="destaque">5</div></a></li>
            </ul>
        </div>
    </div><!--sub-box-->
</div><!--box-->

CSS

div{width 100%;}
.box{
   float: left;
   padding: 01.88888888888889% 01.88888888888889% 0% 01.88888888888889%;
   /*padding: 17px 17px 0px 17px;*/
}

.box:first-child{margin: 0%;}
.sub-box{
   float: left;
   padding: 0% 0% 01.88888888888889% 0%;
   border-bottom: 1px solid #e1e1e1;
}
.sub-box:first-child{display: inline-block;margin: 0%;}
#carousel ul{
   position: relative;
   display: flex;
   margin: 0%;
   padding: 0%;
   float: left;
   width: 100%;
   max-height: 260px;
   height: auto;
   background-color: green
}
#carousel ul li{
   margin: 0% 01.5% 0% 0%;
   width: 16.1%;
   /*width: 161px;  161/900*/
   background-color: orange
}
#carousel ul li .destaque{
   float: left;
   width: 100%;
   height: 260px;
   height: 250px;
   border: 1px solid transparent;
   border-radius: 3px;
}
#carousel ul li:last-child{margin: 0%;background-color: gray}

JQUERY

$(document).ready(function(){

   var speed = 25000;
   var run = setInterval('rotate()',speed);

   var item_width = $('#carousel li').outerWidth();
   var left_value = item_width * (-1);

   $('#carousel li:first').before($('#carousel li:last'));

   $('#carousel ul').css({'left' : left_value});

   $("#prev").click(function(){

      var left_intend = parseInt($('#carousel ul').css('left')) + item_width;
      $('#carousel ul').animate({'left':left_intend},200, function(){

          $('#carousel li:first').before($('#carousel li:last'));
          $('#carousel ul').css({'left' : left_value});

      });

      clearInterval(run);
      run = setInterval('rotate()',speed);

   });

   $("#next").click(function(){

      var left_intend = parseInt($('#carousel ul').css('left')) - item_width;
      $('#carousel ul').animate({'left':left_intend},200, function(){

          $('#carousel li:last').after($('#carousel li:first'));
          $('#carousel ul').css({'left' : left_value});

      });

      clearInterval(run);
      run = setInterval('rotate()',speed);

   });

   $('#carousel').hover(
      function(){
        clearInterval(run);
        disableScroll();
      },
      function(){
        clearInterval(run);
        run = setInterval('rotate()',speed);
        enableScroll();
    });

});

var keys = {37:1, 38:1, 39:1, 40:1};

function preventDefault(e){
   e = e || window.event;
   if(e.preventDefault)
      e.preventDefault();
      e.returnValue = false;
   }
   function preventDefaultForScrollKeys(e){
      if(keys[e.keyCode]){
      preventDefault(e);
      return false;
   }
 }

 function disableScroll(){
    window.onwheel = preventDefault;
    window.ontouchmove = preventDefault;
    document.onkeydown = preventDefaultForScrollKeys;
 }

 function enableScroll(){
   window.onwheel = null;
   window.ontouchmove = null;
   document.onkeydown = null;
 }
 function rotate(){
   $('#next').click();
 }

In fact, 900px is catching #carousel ul of my 100% only that something has pulling it to the left, I can not identify, I put 900px worked out, more when I lower the screen, the same effect of the image, the div margin: 0% 0% 0% 15.77777777777778%;/*margin: 0px 0px 0px 142px; 142/900 */ is pulled back to the left, I tried to put it like this

#carousel ul{
   position: relative;

   display: flex;
   align-items: center;

   padding: 0px;
   float: left;
   width: 100%;
   height: 260px;
   max-height: 260px;
   height: auto;
   background-color: green
}

and so

#carousel ul{

   position: absolute;
   top: 35px;
   left: 50%;
   transform: translate(-50%,0px);

   padding: 0px;
   float: left;
   width: 100%;
   height: 260px;
   max-height: 260px;
   height: auto;
   background-color: green
}

No way it worked

If anyone has any solution that the div div is to be fluid within 900px it also helps