I'm new to css and is trying a simple list layout, when I delete the
padding: 14px 16px;
<li><a class="active" href="#home">Home</a></li>
Whenever you are using float, keep in mind that you have to use
clear:both. The reason why we use clear:both is that float property will break the flow of html element and will push them according to value(left,right), in your case you have used float:left means all li will be in one line and if space will not covered then it will create blank space issue and to remove that blank space we use clear:both so any blank space which is left will be covered by using clear:both.
See here I have used div to remove blank space.