I'm trying to center-align the items in the navbar.
https://i.stack.imgur.com/FmDYS.png
Although the image looks centered, I believe it's because its size is stretching the navbar. How can I achieve this without changing the size of the picture?
I attempted setting max-height, but it doesn't seem to make any difference.
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style> <body>
<header>
<div class="container">
<ul>
<li><a href="#"><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></a></li>
<li><a href="#news" class="active">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="hoyre" style="float:right;"><a href="#about">Donate</a></li>
</ul>
</div>
</header>
</body>