align divs side by side - html

Question

I want to align divs side by side but the padding doesn't let the divs to align side by side and I'm not allowed to remove padding or change anything. just need to add a property and i don't know what property I should add.
Here's the code:
body {
padding: 30px;
}
section {
background: lightgreen;
width: 75%;
float: left;
}
article {
background: white;
margin: 0 0 1rem 0;
}
aside {
background: pink;
width: 25%;
float: right;
}
header,
article,
section,
.module {
padding: 1rem;
}
<section>
<article>
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo
molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab
doloremque accusamus iusto aliquam facilis sapiente!
</p>
</article>
<article>
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo
molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab
doloremque accusamus iusto aliquam facilis sapiente!
</p>
</article>
</section>
<aside>
<div className="module">
<h3>Module</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem
ab delectus fugit repellendus perspiciatis dolor consequuntur
tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam
corporis nostrum aspernatur aliquid harum saepe ab pariatur veniam
iste ipsam alias nemo voluptatibus doloribus.
</p>
</div>
</aside>

Answer 1

box-sizing CSS will fix this issue.
Add default box-sizing property to border-box
* {
box-sizing: border-box;
}