Whenever I zoom in or out on my page, the homepage button loses its color and fails to expand to the right side. So, I have two main goals:
1) To center the selected area (highlighted by a red border in the image).
2) To extend the green color of the homepage all the way to the end of the page.
Apologies for any language barriers. Feel free to ask if anything is unclear in my question.
View My Objective
My Current Situation
The Frustration I'm Facing
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Infusion</title>
<link rel="stylesheet" type="text/css" href="infusion.css">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="unlist">
<a href="#"><li class="homepage"><p class="parhome">infusion</p></li></a>
<a href="#"><li class="nav-elements">design folio</li></a>
<a href="#"><li class="nav-elements">services</li></a>
<a href="#"><li class="nav-elements">our business</li></a>
<a href="#"><li class="nav-elements">how we help</li></a>
<a href="#"><li class="nav-elements">take the tour</li></a>
<a href="#"><li class="nav-elements">contact</li></a>
</ul>
</div>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 2000px;
margin: 0 auto;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
line-height: 75px;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 25px;
padding-left: 25px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}