Space on the right end of menu bar - html

Question

I'm new to HTML and CSS, and this is my first project.
I have this "space" near the end of the navbar and it forces the next link to break into a new line. Also, I cannot find a solution that removes the gap between the background image and the navbar no matter the screen size.
I'm not able to pinpoint what is causing these problems, and I'm sure it's just some petty mistake.
navbar http://prntscr.com/g0xi6z
.topnavhome nav {
position: relative;
display: block;
margin: 0px;
background-color: #333333;
overflow: hidden;
text-align: justify;
font-size: 0px;
min-width: 500px;
width: 100%;
}
.topnavhome:after {
content: '';
display: inline-block;
width: 100%;
}
.topnavhome .li {
display: inline-block;
}
.topnavhome nav li a {
float: left;
display: block;
padding: 12px;
width: 180px;
margin-bottom: -1.5px;
color: #f2f2f2;
border-left: solid 3px #333333;
text-align: center;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 20px;
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.topnavhome nav a:hover {
background-color: #046A78;
color: white;
border-left: solid 3px #79CBD6;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
<ul class="topnavhome" id="myTopnav">
<nav>
<li>Home</li>
<li>Network Security</li>
<li>Passwords</li>
<li>Firewalls</li>
<li>Encryption</li>
<li>Biometric Devices</li>
<li>References</li>
</nav>
</ul>

Answer 1

Fix Error:
* {
box-sizing: border-box;
}
More css for setting nav use :
.topnavhome {
padding: 0;
}
And define height for nav and a element.
body, ul {
margin:0;
}
* {
box-sizing: border-box;
}
.topnavhome {
padding: 0;
}
.topnavhome nav {
position: relative;
display: block;
margin: 0px;
background-color: #333333;
overflow: hidden;
text-align: justify;
font-size: 0px;
min-width: 500px;
width: 100%;
height: 90px;
}
.topnavhome:after {
content: '';
display: inline-block;
width: 100%;
}
.topnavhome li {
display: inline-block;
}
.topnavhome nav li a {
float: left;
display: block;
padding: 12px;
width: 180px;
margin-bottom: -1.5px;
color: #f2f2f2;
border-left: solid 3px #333333;
text-align: center;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 20px;
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
height: 90px;
}
.topnavhome nav a:hover {
background-color: #046A78;
color: white;
border-left: solid 3px #79CBD6;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
<ul class="topnavhome" id="myTopnav">
<nav>
<li>Home</li>
<li>Network Security</li>
<li>Passwords</li>
<li>Firewalls</li>
<li>Encryption</li>
<li>Biometric Devices</li>
<li>References</li>
</nav>
</ul>

Answer 2

About a "space" near the end of the navbar which forces the next link to break into a new line, you have this problem cause there is not enough place to fit in, you need to use "#media queries", so that when you would reduce width it would fit nicely. For example on my screen I do not have such problem
Here are a link for good examples of using #media-query
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
And next, you have your <ul> height greater than <nav> in it. And the reason why expanding height of nav wouldn't help is that you have content after your <ul>, which is taking a gap place after nav.
just delete that line:
.topnavhome:after {
content: ''; <------- delete this one
display: inline-block;
width: 100%;
}

Answer 3

you have fixed width of 180px to .topnavhome nav li a which making the li to stack down as they doesn't fit in the container width.
Try using flex which will equally divide the width to li
nav { display: flex;}
nav li { flex: 1;}

Answer 4

Please try below code.
Here your css is not working well it's due to all li element's are not fitting in container due to this reason displaying in new line.
Just add below classes.if it's already their then update the properties.
ul#myTopnav {
-webkit-padding-start: 5px;
}
Here i have only made changes in width & padding.
.topnavhome nav li a {
padding: 12px 6px 12px 6px;
width: 172px;
}
One more thing is used #media query if it's not fitting in small screen or larger screen.
Hope this helps.