CSS3: Element positioning inside nav - html

Question

I know that there are four different position values:
static
relative
fixed
absolute
What's really bothering me is the position of an element when i increase the marigin of it. Something like below.
HTML
<header>
<h1>Welcome to Online Shopping System <button type="submit" onclick = "location.href = 'adminlogin.php';" id = "button" >Admin</button></h1>
</header>
<nav id = "navigation">
<ul>
<li>Home</li>
<li>View</li>
<li>Login</li>
<li>Signup</li>
</ul>
</nav>
Notice the grey background color effect that I have applied in the hover.
It clearly shows I'm messing up somewhere with the positioning, and it would be a plus if you could enlighten on overflow property too.
CSS
header > h1
{
width: 100%;
background-color: brown;
height: 45px;
color: white;
text-indent: 65px;
font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
padding: 0;
margin: 0;
}
nav ul li
{
float:left;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a
{
position: relative;
overflow: hidden;
color: white;
background-color: none;
display: block;
line-height: .1em;
padding: 0.5em 0.5em;
text-decoration: none;
margin-left: 80%;
}
nav li > ul li a
{
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
#navigation
{
background-color: brown;
margin: 0;
overflow: hidden;
height: 45px;
}
nav li:hover
{
background-color: #666;
}

Answer 1

this is how i got it, I Think, how You wanted?
Remove margin-left: 80%,
Add these into your CSS
nav ul {
display: flex;
justify-content: center;
width: 100%;
padding: 0px;
}
nav ul li {
width: 25%;
padding: 5px;
}
Does this helped?

Answer 2

this might help u a bit, sorry about my english.
Overflow:
hidden: hides everything what is not inside the area, no scrollbars.
overlay: shows scrollbars if needed and overlays scrollbars top of contents
scroll: show scrollbars normally
visible: shows all the child elements of current content, no area limitations.
Also you can set just overflow-x: hidden to prevent horizontal scrollbar for example and overflow-y: overlay to put scrollbar top of content.
Position:
fixed: dependable window area, stays exactly where u point it
relative: all child elements dependable to relative area
absolute: dependable to a first upper relative area, scrolls with contents
static: normal state
Examples:
<div style='position: relative; width: 100px; height: 20px;'>
<!-- THIS GOES TO TOP OF WINDOW LEFT CORNER AND STAYS THERE -->
<div style='position: fixed; top: 0px; left: 0px;'></div>
<!-- THIS GOES TOP OF UPPER RELATIVE CONTENT RIGHT TOP CORNER -->
<div style='position: absolute; top: 0px; right: 0px;'></div>
</div>
<div style='position: relative; overflow: hidden'>
<!-- THIS DIV YOU JUST NOT BASICALLY SEE, BECOUSE OF OVERFLOW HIDDEN -->
<div style='position: fixed; right: 0px; bottom: 0px;'></div>
</div>
I hope this helps You to understand it little better :)