Estoy intentando colocar el div aside al lado del div article, estos dos divs se encuentran dentro del div main, mi problema es que al intentar color el div aside se me queda abajo del div article. He pensado colocar el div padre(main) en display:inline donde me colocaría los elementos uno al lado del otro pero no funciona. Utilizando el margin-top de forma negativa lo puedo subir hacia arriba pero no queda en la misma posición que el otro div. ¿Por que pasa esto?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Mi NavBar</title>
</head>
<body>
<header class="header">
<nav class="nav">
<ul>
<li>Inicio</li>
<li>Contacto</li>
<li>Servicios</li>
<li>Proyectos</li>
</ul>
</nav>
</header>
<main class="main">
<article class="article">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, suscipit. Veniam amet consectetur fugiat vitae, autem delectus id nesciunt laborum? Eius error cumque deleniti nisi? Consequuntur placeat molestiae sint ullam.
Reprehenderit aspernatur quos voluptatibus illo aperiam accusantium laborum vel velit, obcaecati repellat ad repudiandae vitae minus. Corrupti, eaque hic? Consectetur placeat temporibus mollitia aperiam dolor nisi corrupti quibusdam dicta laboriosam.
Voluptate accusantium nulla voluptas neque, cupiditate culpa tempore velit, in minima earum beatae eaque commodi, animi eligendi sequi. Laudantium, accusamus ab! Facilis recusandae aut placeat numquam fugit dolores deleniti. Eius?
Et sunt quae dolorum, maiores aspernatur illo autem ea repellendus molestias nemo quod magnam earum quibusdam quisquam, ullam dolores non velit quos odit itaque accusamus rerum, unde ratione. Rerum, dolor!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas itaque et omnis sequi est cupiditate nobis beatae molestiae excepturi sunt dolores officia laborum rem tempore, velit voluptates architecto veritatis similique?
Fugit laudantium deserunt quis in blanditiis rem est, unde at quod maxime quas fugiat tempore quia nesciunt sed quasi laboriosam possimus quidem, voluptate quo mollitia explicabo velit aliquam quaerat! At?
Iste eligendi vel adipisci assumenda exercitationem nesciunt sit nemo atque tempora fugiat totam ex, rem dolor accusamus iure cum molestiae minima earum hic molestias nostrum ea itaque ad dignissimos. Deserunt.
Rem impedit odio iusto nisi ratione exercitationem, accusamus, voluptatibus eius libero, dignissimos veritatis consequuntur. Natus, beatae. Est aut hic maiores, doloremque rerum quo cumque commodi similique, dolorum, dolores quae numquam?
</article>
<aside class="aside">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, eaque molestias. Recusandae maxime, in cupiditate iste laboriosam error totam quam, itaque corrupti quos hic distinctio quia consequuntur perspiciatis eos cumque.
Unde, quidem! Quidem soluta esse, praesentium vitae in sequi omnis, non tempore quod tempora qui a recusandae molestias ipsum facere quia deleniti, laboriosam assumenda facilis. Molestiae deserunt voluptas rerum similique!
</aside>
</main>
</body>
</html>
Hoja CSS:
body {
margin:0px;
background-color: aqua;
}
.header {
background-color: black;
}
.nav {
width: auto;
text-align: right;
font-size: larger;
color: green;
}
.nav li {
display: inline;
margin-left: 20px;
}
.main {
border: 2px solid red;
}
.article {
border: 2px solid yellow;
width: 59%;
}
.aside {
border: 2px solid salmon;
display: block;
width: 40%;
margin-left: auto;
}