I have written the following CSS code but I don't understand why there is extra space above the green div? I know vertically aligning the green div to the top will fix it but I want to know why it's showing down?
HTML Code ->
<header>
<nav>
<ul>
<li>.........</li>
<li>.........</li>
<li>.........</li>
<li>.........</li>
</ul>
</nav>
</header>
<main>
<div class="red">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio nisi voluptatibus cupiditate. Ex hic sequi exercitationem iusto tenetur. Voluptate quisquam repellat distinctio officiis eligendi. Molestias, beatae velit. Et soluta architecto nemo? Delectus vel voluptate impedit commodi? Possimus enim similique, accusamus corporis impedit dolorum id repudiandae accusantium, odit nemo nobis, natus eligendi libero quas autem? Voluptatem laborum eveniet aliquid accusamus cupiditate impedit commodi dolorum nesciunt, non hic debitis corrupti omnis dolores nisi voluptates corporis consectetur ipsam culpa blanditiis, assumenda sunt. Reiciendis veritatis quidem voluptatum inventore atque ratione eius, placeat adipisci natus dolorem laborum necessitatibus consequuntur? Nobis, doloremque vel. Ullam, incidunt voluptatum?
</div><div class="green">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, explicabo, nam architecto eius praesentium quam quae dolorem minima quo enim odio error quod commodi aut quos repudiandae autem eum sint officiis dolorum necessitatibus expedita nisi amet? Exercitationem blanditiis omnis animi tenetur molestiae, culpa temporibus unde sequi, qui ipsum nesciunt voluptatibus!
</div>
</main>
CSS Code ->
*{
margin: 0;
padding: 0;
}
nav{
background-color: blue;
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px;
}
.red{
background-color: red;
color: white;
height: 200px;
width: 600px;
border: 2px solid black;
display: inline-block;
}
.green{
background-color: green;
height: 200px;
width: 300px;
border: 2px solid black;
display: inline-block;
}
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio nisi voluptatibus cupiditate. Ex hic sequi exercitationem iusto tenetur. Voluptate quisquam repellat distinctio officiis eligendi. Molestias, beatae velit. Et soluta architecto nemo? Delectus vel voluptate impedit commodi? Possimus enim similique, accusamus corporis impedit dolorum id repudiandae accusantium, odit nemo nobis, natus eligendi libero quas autem? Voluptatem laborum eveniet aliquid accusamus cupiditate impedit commodi dolorum nesciunt, non hic debitis corrupti omnis dolores nisi voluptates corporis consectetur ipsam culpa blanditiis, assumenda sunt. Reiciendis veritatis quidem voluptatum inventore atque ratione eius, placeat adipisci natus dolorem laborum necessitatibus consequuntur? Nobis, doloremque vel. Ullam, incidunt voluptatum?
