I have been diving into the world of HTML and CSS in an attempt to broaden my skillset. However, while working on an exercise, I encountered a roadblock. The challenge lies in having the 4 articles within the
<section id="news">https://i.sstatic.net/Y4KYp.png
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 href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
<a href="#">d</a>
<a href="#">e</a>
</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>