Текст в теге h1 в div`е с классом "welcome" не выравнивается по центру, почему так происходит?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
<h1>Logo</h1>
</div>
<div class="navigation">
<nav>
<ul>
<li><a href="#">Main</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="welcome">
<h1>Welcome!</h1>
</div>
</body>
</html>
html, body, ul, h1{
margin: 0;
padding: 0;
}
header{
height: 100px;
background: #5e7daa;
}
.wrapper{
max-width: 1024px;
height: inherit;
margin: 0 auto;
}
.logo{
float: left;
color: #fff;
line-height: 100px;
}
.navigation{
float: right;
line-height: 100px;
}
.navigation li{
display: inline-block;
color: #fff;
margin-right: 23px;
font-size: 18px;
text-transform: uppercase;
}
.navigation a{
text-decoration: none;
color: inherit;
padding: 10px;
transition: 0.75s ease-out;
border-radius: 7px;
}
.navigation a:hover{
background: #b6d2f9;
}
.welcome{
text-align: center;
}
