There's a random space in my website, how do I get rid of it?

Question

There's a small space in the left side of the navigation bar. I just can't get it off and I'm kinda mad. Somebody have ideas for this? Or is it just my device's size?

    <div class="bar">
        <ul> 
            <li> <a href="#">CANCEL CUSTOM ORDER </a></li>
            <li> <a href="#">DRAFTS </a></li>
            <li> <a href="#">FEEDBACK </a></li>
        </ul>
    </div>

CSS:

div.bar {
  position: sticky;
}

div.bar ul {
  width: 110%;
  height: 40px;
  background-color: #a3b5c0;  
  border-bottom: 1px solid #96abb9;
  border-top: 1px solid #96abb9;
  text-align: center;
  margin: 0;
}

div.bar li {
  display: inline-block;
  font-size: 20px;
  font-family: 'Questrial';
  text-decoration: none;
  list-style-type: none;
}

div.bar li a {
  color: #efefef;
  text-decoration: none;
  padding: 0px 80px 20px 80px;
}

div.bar li a:hover:not(#active) {
  background-color: #8dbbc5;
  transform: scale(1.5);
}

Answer 1

use this only add body and remove 100% from div.bar ul:

body {
        margin: 0;
        width: 100%;
    }
    div.bar {
        position: sticky;
    }

    div.bar ul {
        height: 40px;
        background-color: #a3b5c0;
        border-bottom: 1px solid #96abb9;
        border-top: 1px solid #96abb9;
        text-align: center;
        margin: 0;
    }

    div.bar li {
        display: inline-block;
        font-size: 20px;
        font-family: 'Questrial';
        text-decoration: none;
        list-style-type: none;
    }

    div.bar li a {
        color: #efefef;
        text-decoration: none;
        padding: 0px 80px 20px 80px;
    }

    div.bar li a:hover:not(#active) {
        background-color: #8dbbc5;
        transform: scale(1.5);
    }

<div class="bar">
    <ul>
        <li> <a href="#">CANCEL CUSTOM ORDER </a></li>
        <li> <a href="#">DRAFTS </a></li>
        <li> <a href="#">FEEDBACK </a></li>
    </ul>
</div>

Answer 2

body {
  margin:0px;
  padding:0px;
  position: sticky;
}