Nested li elements not aligning properly - html

Question

I am able to display all the nested li's inline. What I don't understand is why there is a gap between About and Our Team li elements. I have already tried setting the margin and padding of both ul and li elements to 0.
<div ng-show = "buttonDisplay" id = "buttonDisplayContent">
<ul>
<li> Home </li>
<li class = "subLi"> About </li>
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services </li>
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
<li class = "nextToNested"> Portfolio </li>
<li> Contact </li>
</ul>
</div>
CSS
#buttonDisplayContent ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul a {
text-decoration: none;
color: #000;
font-size: 25px;
font-weight: bold;
}
#buttonDisplayContent ul ul a {
text-decoration: none;
color: lightgray;
font-size: 15px;
font-weight: bold;
}
.subLi {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
.nested {
margin-left: 0;
}
.nested li {
display: inline-block;
padding-bottom: 6px;
padding-right: 1%;
padding-left: 1%;
padding-top: 8px;
}
#buttonDisplayContent ul li:hover {
background-color: black;
}
UPDATE
Thanks for all your help. I changed my HTML and CSS as follows. Li elements are still not aligning as desired. Here is a fiddle: https://jsfiddle.net/qvq87ke1/2/
HTML
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" >
<ul>
<li> Home </li>
<li class = "subLi">About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li> Contact </li>
</ul>
</div>
CSS
#buttonDisplayContent {
background-color: #141516;
width: 100%;
margin-top: 9%;
text-align: center;
position: absolute;
opacity: 0.9;
}
#buttonDisplayContent ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul a {
text-decoration: none;
color: #fff;
font-size: 50px;
font-weight: bold;
}
#buttonDisplayContent ul ul a {
text-decoration: none;
color: lightgray;
font-size: 40px;
font-weight: bold;
}
.subLi {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
.nested {
float: right;
margin-left: 0;
}
.nested li {
display: inline-block;
padding-bottom: 6px;
padding-right: 1%;
padding-left: 1%;
padding-top: 8px;
}
#buttonDisplayContent ul li:hover {
background-color: black;
}

Answer 1

Your markup looks like it is incorrect. When nesting un-ordered or ordered lists they should be contained withing the li they will be creating a sub list for.
Like this:
<ul>
<li>One</li>
<li>Two
<ul>
<li>One - Sub Two</li>
<li>Two - Sub Two</li>
</ul>
</li>
<li>Three</li>
</ul>
You are adding your ul between the li:
<li class="subLi">About</li>
<ul class="nested">
<li>Our Team</li>
<li>Our efforts</li>
</ul>
<li class="nextToNested">Blog</li>

Answer 2

Updated answer based on updated question..
Try setting display:inside; on your nested <ul> and put your nested <ul> inside of the <li>
P.S. A screenshot or a fiddle (or at least your plain CSS) would be really helpful..

Answer 3

You should post a JSFiddle with your code, that would be easier to help you.
Otherwise, as a good practice, the UL nested nested should be in the previous LI (which should it parent so).
<li class = "subLi">
About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
Maybe this is where the problem comes from.
If it can helps you:
Proper way to make HTML nested list?
Good Luck'

Answer 4

It's possible there is some padding/margin on the "a" element as well from the browser. Best practices is to import a reset.css file at the beginning of your project to clear all browser-applied CSS and style it on your own or using a framework.

Answer 5

I figured it out. I was floating the li elements unnecessarily.
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" >
<ul>
<li> Home </li>
<li class = "subLi">About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li> Contact </li>
</ul>
</div>
SASS
#buttonDisplayContent
background-color: #141516
width: 100%
margin-top: 9%
text-align: center
position: absolute
opacity: 0.9
#buttonDisplayContent
ul
list-style-type: none
padding: 0
#buttonDisplayContent
ul
ul
list-style-type: none
padding: 0
#buttonDisplayContent
ul
a
text-decoration: none
color: #fff
font-size: 50px
font-weight: bold
#buttonDisplayContent
ul
ul
a
text-decoration: none
color: lightgray
font-size: 40px
font-weight: bold
.subLi
//float: left
margin: 0
padding: 0
list-style-type: none
.nested
//float: right
margin-left: 0
display: inline
.nested
li
display: inline
padding-bottom: 6px
padding-right: 1%
padding-left: 1%
padding-top: 8px
#buttonDisplayContent
ul
li:hover
background-color: black