How to remove the "non-existent" part of the block?

Question

css

I started building a website for my school, but ran into an unexpected problem. Began to typeset the horizontal navigation bar through

#navigation {
    width: 1022; 
    height: 60px;
    background-color: black;
    box-shadow: 0 0 10px 4px #8b8b7a;
    border-radius: 7px;
    margin: auto;
    margin-top: 40px;    
}

#navigation li {
    float: left;
    width: 144px;
    height: 58px;
    background: #73cde8;
    border: 1px solid red;
    text-align: center;
}

Everything seems to be correct, but in reality something like this
turns out. It turns out that the black piece "ul" on the left does not exist.
And how to remove it does not occur to me. I hope for your help.
PS Do not judge strictly

Answer 1

padding-left:0
add to #navigation, lists(ul) have non-zero padding on the left by default.

Answer 2

li{margin:0;padding:0;}
This is the standard indent for bulleted lists...

Answer 3

Don't do bullshit. Use bootstrap

Answer 4

Check margin on ul and li