how do i put the sections in a straight line? - html

Question

I am having problems with the two sections i'm making. i want to make a notification section but my 3 articles are not how i want them to be. how do i make it so that the three articles and the aside are on the same line without overflowing?
problem
I just want them in a straight line like these
Example
h1{
margin-top: 80px;
}
article {
background-color: beige;
margin-bottom: 1em;
min-height: 300px;
}
article.text{
color: black;
background: white;
min-height: 300px;
}
article, h2{
padding-top: 1em;
}
main{
column-count: 3;
column-gap: 20px;
margin-top: 1em;
}
<main>
<h1>Welkom op Het bedrijf</h1>
<section>
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<aside>
<article class="text">
<h2>Whats new?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est.
</p>
</article>
</aside>
</main>

Answer 1

Actually from your explanation and images I gather that you want to split your page into two different areas:
a multi column story container
a single column notification area
As opposed to the current three column main container you have now.
Without using Flexbox and CSS-grid I created a snippet with what I understand you want. I added some extra articles and background-colors to show the structure and commented the CSS where applicable...
Bonus: added some 'responsive' behaviour using both math and #media queries.
/* Generally accepted preferred rules */
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
/* remove some default HTML spacing (when required, use padding instead) */
body,h1,h2,h3,h4,h5,h6,p { margin: 0 }
/* define page structure */
.main { height: 100%; width: 100% } /* avoid using <main> */
/* mobile first, 1 column */
section { max-width: 67%; float: left; column-count: 1; column-gap: 1.25rem }
aside { max-width: calc(33% - 1.25rem); float: right } /* minus column-gap */
article { break-inside: avoid } /* keeps content in the same column */
/* some responsiveness */
#media (min-width: 961px) { section { column-count: 2 } }
#media (min-width: 1281px) { section { column-count: 3 } }
/*
responsive page padding (linear equation y = mx + b)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
grow from 32px on a 320px viewport to 72px on a 1920px viewport
grow from 8px on a 320px viewport to 320px on a 1920px viewport
*/
.padded {
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px)
}
/* eye-candy only */
header {
column-span: all; /* span full container */
padding: 1.25rem; /* equal to column-gap */
background-color: Black; Color: White;
}
h1 { line-height: 1.25rem }
h2,p { padding-bottom: .5em }
section>article { background-color: Beige }
aside>article { background-color: rgba(0,0,0,.1); color: Black }
article {
padding: 1.25rem; /* equal to column-gap */
margin-bottom: 0.5rem /* space between articles */
}
[outlines="1"] * { outline: 1px dotted }
<div class="main padded" outlines="0">
<section>
<header>
<h1>Welkom op Het bedrijf</h1>
</header>
<article>
<h2>Story 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
<article>
<h2>Story 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
</article>
</section>
<aside>
<header>
<h1>What's new?</h1>
</header>
<article>
<h2>What's new 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
<article>
<h2>What's new 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
<article>
<h2>What's new 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
volutpat est.</p>
</article>
</aside>
</div>

Answer 2

If I am understanding correctly, the aside is the notifications area, while the main content is to the left. I would use CSS Grid for this.
CSS:
.container {
display: grid;
grid-template-columns: repeat(2, 2fr) 1fr;
grid-gap: 2rem;
}
article {
background-color: beige;
margin-bottom: 1em;
min-height: 300px;
}
aside.notifications {
background-color: #171717;
color: #f5f5f5;
}
aside, article {
padding: 1rem;
}
HTML:
<main>
<h1>Welkom op Het bedrijf</h1>
<section class="container">
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<article>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
</p>
</article>
<aside class="notifications">
<h2>Whats new?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est.
</p>
</aside>
</section>
</main>