Хочу чтобы логотип и ссылки были в одну строку. Я хочу это сделать с помощью флексов или гридов. как это сделать на моем примере?
html,body{
min-height: 5026px;
padding: 0;
margin: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
.container{
width: 1060px;
margin: 0 auto;
}
header{
}
nav li{
}
nav ul{
margin: 0;
list-style: none;
padding: 0;
display: flex;
justify-content: flex-end;
}
.main-navigation a{
font-family: 'Playfair Display', serif;
text-transform: uppercase;
color: #626262;
text-decoration: none;
font-size: 14px;
padding-right: 20px;
}
#logo{
font-family: 'Inconsolata', monospace;
font-size: 30px;
text-transform: uppercase;
padding: 0;
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Playfair+Display:400,400i,700,900" rel="stylesheet">
<script type="text/javascript" href="js/script.js" defer></script>
</head>
<body>
<div class="container">
<header class="main-navigation">
<h1 href="#" id="logo">minimø</h1>
<nav>
<ul>
<li><a href="#">lifestyle</a></li>
<li><a href="#">photodiary</a></li>
<li><a href="#">music</a></li>
<li><a href="#">travel</a></li>
</ul>
</nav>
</header>
</div>
<div class="container">
<div class="himg">
<img src="img/himg.png" alt="" >
</div>
</div>
</body>
</html>
как должно выглядеть
флоаты и инлайн блоки больше не юзаю