Mystery gap between container and article element - html

Question

Can anyone help me with why the left side of this article is sitting down from the top of the section? I have shown this in the below image.
I have used Chrome developer tools to try and find the problem but I can't see anything in the gap or margins that would indicate such behaviour?
main {
border: 1px solid white;
}
main>section {
border: 1px solid black;
}
main>section>h3 {
border: 1px solid black;
width: 98%;
text-align: center;
padding: 2px;
margin: 2px 2px;
height: 10%;
}
main>section>article {
display: inline-flex;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 300px;
max-height: 400px;
}
main>section>article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px;
height: 90%;
margin: 1px 1px;
}
main>section>article.aright {
border: 1px solid black;
width: 68%;
padding: 1%;
height: 90%;
margin: auto;
}
<main id="content">
<section class="part">
<h3>Latest News</h3>
<article class="aleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.
</article>
<article class="aright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione
in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere
harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.
</article>
</section>
</main>

Answer 1

It's being caused by uneven padding on your article elements.
main > section > article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px; /* pixel unit */
height: 90%;
margin: 1px 1px;
}
main > section > article.aright{
border: 1px solid white;
width: 68%;
padding: 1%; /* percentage unit */
height: 90%;
margin:auto;
}
Matching the units for both – percentages or pixels – solves the problem.

Answer 2

you may use this code
main>section {
border: 1px solid white;
display: flex;
flex-wrap: wrap;
}
and replace the CSS you have for main>section
Hope this helps
Take care and happy coding