Nav button design issue - html

Question

I'm trying to design my nav (4 items in total) to be in circles each spaced about 20 px apart, located on the top right of my screen. I got everything to "work" design wise, however, now that every nav item appears how I want it (in its own a circle), when I go to have them all positioned on the upper right the first 3 nav items have disappeared and only the 4th nav item is visible. Please help!
HTML:
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
CSS:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: absolute;
top: 50px;
right: 100px;}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}

Answer 1

What about this:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 120px;
float: left;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>

Answer 2

Try:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}

Answer 3

It's because your navbutton elements have position: absolute so they overlap each other, i.e. only the last one is visible.
Try this snippet:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 20px;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>

Answer 4

If you want the navigation to be in the top right corner of the page use this CSS:
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav li {
display: inline-block;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 100px;
margin: 20px;
}

Answer 5

#nav{
position:absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
margin: 20px;
float:left;
}