Problem when displaying articles inline block [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I'm trying to learn HTML and CSS. However, I was doing an exercise, and now I'm stuck because those 4 articles in <section id="news"> don't display side by side, and I wasn't able to figure out what was happening.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #1A4575;
}
header {
background-color: #2F5075;
width: 600px;
text-align: center;
margin: 10px;
}
nav {
display: inline-block;
}
nav>a {
text-decoration: none;
background-color: #2B71C2;
color: white;
}
nav>a:hover {
color: #80B7F7;
}
header>h1 {
display: inline-block;
}
section#breaking>article {
width: 700px;
background-color: rgba(172, 35, 35, 0.719);
color: white;
font-size: 20px;
margin: 5px;
padding: 3.5px;
}
section#news {
background-color: #2B88C2;
}
section#news>article {
width: 400px;
height: 250px;
display: inline-block;
background-color: white;
color: black;
border: 3px solid black;
margin: 5px 5px 5px 5px;
padding: 5px 5px;
}
section#news>h1 {
text-align: center;
padding: 5px;
}
aside {
background-color: #1A4575;
color: white;
}
footer {
background-color: #2F5075;
text-align: center;
color: #368FF5;
}
<header>
<h1>Menu</h1>
<nav>
a
b
c
d
e
</nav>
</header>
<main>
<section id="breaking">
<article>
<h2>Breaking news</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda culpa asperiores voluptate. Eius pariatur vero, at repellendus sunt sequi ad qui doloribus excepturi provident ipsam, libero deleniti culpa nihil et.</p>
<aside>
<p>Written by João Marcelo</p>
</aside>
</article>
</section>
<section id="news">
<h1>Daily News</h1>
<article>
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit amet facilis officia ex eos quae possimus nisi, nostrum saepe, debitis obcaecati ea doloribus adipisci, soluta veritatis! Deserunt quam molestias ut.
</p>
<aside>
<p>Written by Pedro Henrique Vasconcelos</p>
</aside>
</article>
<article>
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Leonardo Alves de Paiva</p>
</aside>
</article>
<article>
<h2>Title 3</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Beatriz halfd</p>
</aside>
</article>
<article>
<h2>Title 4</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Joana Bohemia</p>
</aside>
</article>
</section>
</main>
<footer>
<p>Developed by Leonardo</p>
</footer>

Answer 1

Set the vertical align to top on the articles. The default is baseline.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #1A4575;
}
header {
background-color: #2F5075;
width: 600px;
text-align: center;
margin: 10px;
}
nav {
display: inline-block;
}
nav>a {
text-decoration: none;
background-color: #2B71C2;
color: white;
}
nav>a:hover {
color: #80B7F7;
}
header>h1 {
display: inline-block;
}
section#breaking>article {
width: 700px;
background-color: rgba(172, 35, 35, 0.719);
color: white;
font-size: 20px;
margin: 5px;
padding: 3.5px;
}
section#news {
background-color: #2B88C2;
}
section#news>article {
width: 400px;
height: 250px;
display: inline-block;
background-color: white;
color: black;
border: 3px solid black;
margin: 5px 5px 5px 5px;
padding: 5px 5px;
vertical-align:top;
}
section#news>h1 {
text-align: center;
padding: 5px;
}
aside {
background-color: #1A4575;
color: white;
}
footer {
background-color: #2F5075;
text-align: center;
color: #368FF5;
}
<header>
<h1>Menu</h1>
<nav>
a
b
c
d
e
</nav>
</header>
<main>
<section id="breaking">
<article>
<h2>Breaking news</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda culpa asperiores voluptate. Eius pariatur vero, at repellendus sunt sequi ad qui doloribus excepturi provident ipsam, libero deleniti culpa nihil et.</p>
<aside>
<p>Written by João Marcelo</p>
</aside>
</article>
</section>
<section id="news">
<h1>Daily News</h1>
<article>
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit amet facilis officia ex eos quae possimus nisi, nostrum saepe, debitis obcaecati ea doloribus adipisci, soluta veritatis! Deserunt quam molestias ut.
</p>
<aside>
<p>Written by Pedro Henrique Vasconcelos</p>
</aside>
</article>
<article>
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Leonardo Alves de Paiva</p>
</aside>
</article>
<article>
<h2>Title 3</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Beatriz halfd</p>
</aside>
</article>
<article>
<h2>Title 4</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Joana Bohemia</p>
</aside>
</article>
</section>
</main>
<footer>
<p>Developed by Leonardo</p>
</footer>