Why aren't nav bar buttons centered? - html

Question

I have the code there
My question is, why aren't the buttons for different pages centered? This is more obvious when the site is minimized.
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
h1,h3 {
text-align: center;
color: white;
}
li{
list-style-position: inside;
display: inline;
padding-left: 12px;
}
a{
padding: .2em .1em;
color:grey;
background-color: ;
}
}
.xy{
margin-top: 75px;
}
h1{
font-size: 45px;
}
h3{
font-size: 23px;
}
body{
background-color: #451255;
}
nav {
width: 70%;
margin: 0 auto;
background: #fff;
padding: 15px;
box-shadow: 0px 5px 0px #dedede;
position: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #451255;
}
}
.btns,
.fill{
margin: auto;
position: center;
display: block;
}
So, I have that code, you can see on the link what it looks like. My problem is that it's not centered. And when I minimize it, the fact that it's not centered is more obvious. How could I fix that?

Answer 1

like #junkfoodjunkie already said, it's about basic CSS reset.
why? elements got initial CSS set, this is what's going on:
like you can see, your menu's items (blue part) are already centered but you've got initial -webkit-padding-start: 40px; (green part) and it's do the same as padding-left: 40px;, it takes not less than 40px from your menu so that's why it looks like the menu's items are not centered/stick to the right, so in order to fix it you need to overwrite the value of the <ul> element.
you're also set the <li> elements to padding-left: 12px; so the menu's items will not be centered perfectly. if you're not going to use some CSS reset then add .fill > ul {padding-left: 0;} to your CSS.

Answer 2

You're not resetting or eliminating default behavior. You have no margin or padding defined on the <ul>, and you have not reset the CSS to begin with, so there is a default padding and margin messing with you. Put margin: 0; padding: 0; on your <ul> and it should work.
Or, just do a full brutal reset: https://jsfiddle.net/efv8x1x2/1/
Added
* {
margin: 0;
padding: 0;
}
to the beginning of the stylesheet, and voila, centered.