Improve header layout

static/main.css

@@ -33,19 +33,25 @@ nav ul {
 nav li {
 	list-style-type: none;
 	display: inline-block;
-	margin: 0 1vw;
+	margin: 0 10px;
 }
 
-nav span {
-	padding: 2vw;
+nav li:first-child {
+	margin-left: 0;
+}
+
+nav li:last-child {
+	margin-right: 0;
+}
+
+nav span, nav a {
+	display: inline-block;
+	padding: 10px 1vw;
 }
 
 nav a {
 	text-decoration: none;
-
 	color: black;
-	padding: 2vw;
-	font-family: monospace;
 }
 
 nav a:hover, nav a:focus {
@@ -64,6 +70,10 @@ that have a width less or equal than 500px*/
 	nav a {
 		display: block;
 	}
+
+	.alignLeft, .alignRight {
+		border-top: 1px solid #000;
+	}
 }
 
 @media only screen and (min-width: 750px) {
@@ -75,8 +85,21 @@ that have a width less or equal than 500px*/
 		margin-left: auto;
 		margin-right: auto;
 		width: 50%;
-		padding: 10px;
 	}
+
+	.alignLeft {
+		float: left;
+		text-align: left;
+	}
+
+	.alignRight {
+		float: right;
+		text-align: right;
+	}
+}
+
+main {
+	padding: 10px;
 }
 
 input {
@@ -90,14 +113,6 @@ input[type=text] {
 	box-sizing: border-box;
 }
 
-.alignLeft {
-	float: left;
-}
-
-.alignRight {
-	float: right;
-}
-
 .accentuated {
 	color: #66351d;
 }