How do I get my articles to float Left - html

Question

I am not a front-end developer, but for an HTML5 course I am taking I am trying to understand some HTML5 and styling.
I have the following code: these are the beginning of articles which will be side-by-side with image and text, my question is, how do I get them lined up side by side?
<div>
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
</section>
<section>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
</section>
<section>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
</div>
Also, how do I get the <p> under the heading, right now it is off to the left side of the header?

Answer 1

First off, you shouldn't use a <section> for each <article>, instead, you probably want a the <section> to replace your <div> and have all articles nested inside of it as siblings, like so:
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
As for putting them side by side, the best option would be using flexbox (see browser support)
Here's what I came up with:
<style type="text/css">
section {
display: flex;
}
section article {
flex: 1 100%;
}
</style>
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
With flex: 1 100%; you make sure the 3 take all of the horizontal space of their container.
Read more: CSS-Tricks: A complete guide to flexbox