<li> element outside of browser display in navbar

Community Off Topic
1

I am creating a navbar and aligning the elements to the right. The final element is cut off slightly in Safari and Firefox. Not sure about Chrome, I need to download that one still. Do you see anything wrong with my CSS that would cause this?

* {
	font-family: "Arial Black", Gadget, sans-serif;
}

h1 {
	text-align: center;
}

#navBar {
	position:fixed;
    
	top: 0;
	left: 0;
	width:100%;
	height: 60px;
	background-color: black;

}

ul {
    float: right;
    text-align: right;
    list-style-type: none;
    font-family: "Arial Black", Gadget, sans-serif;
    color:azure;
    padding-top: 10px;
    
    
}

li {
    
    display: inline;
    padding: 10px;
    
    
    
}
2

1681×203 10.6 KB

This is a screenshot of the displayed elements in the navbar. The grayish area to the right of the black navbar is my computer’s background for reference.

This is the code in the proper format as well. Sorry about that.

    * {
	font-family: "Arial Black", Gadget, sans-serif;
}

h1 {
	text-align: center;
}

#navBar {
	position:fixed;
    
	top: 0;
	left: 0;
	width:100%;
	height: 60px;
	background-color: black;

}

ul {
    float: right;
    text-align: right;
    list-style-type: none;
    font-family: "Arial Black", Gadget, sans-serif;
    color:azure;
    padding-top: 10px;
    
    
}

li {
    
    display: inline;
    padding: 10px;
    
    
    
}
3

I don’t see a closing bracket …}.