Padding is very often the culprit when it comes to making our layout fluid and effective. This is because it changes the size of the container. See if you cannot find some other way. such as a margin on an inner container (which may require more structure).
I don’t know Flexbox but my understanding is that it supports inline-block with tolerance for variable viewport width.
Another consideration is the 50% chosen width as it does not account for margins that HTML may give to inline-block. Drop to 49% and see what happens.
hey, sorry for replying late. I’ve been trying so many things. I put the section in a wrapper and made the right section to 40% to see if that would work. And it did, but only when I inspected elements which made the screen. I found a few problems:
When I would minimize the screen, the right section would float around the page
When I made the wrapper position: relative and the right section position:absolute, and looked at the page full screen on my 1440p monitor, the right section would overflow.
and 3) a new section which is supposed to go under this div, stays on top of the previous section despite the order of elements.
I’ll post my code and pictures again:
HTML
<div class="wrapper"></div>
<div class="orientation">
<div class="studypic">
<img src="resources/assets/images/information-main.jpg">
</div>
<div class="orientationtext">
<h1>
It doesn't hurt to keep practicing
</h1>
<p><em>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia de"</em></p>
</div>
<span>Emanuel Sr, Strategist at Hiring.com</span>
</div>
<div class="orientationbar">
<div class="date">
<img src="resources/assets/images/information-orientation.jpg" alt="Oreintation-date">
<div class="datetext"><h2>Orientation date</h2>
<p>Tue 10/11 & Wed 1-/12: 8am-3pm</p>
<span>Read more</span>
</div>
</div>
<div class="campuscard">
<img src="resources/assets/images/information-campus.jpg">
<div class="campustext"><h2>Our Campus</h2>
<p>Find out which campus is close by you</p>
<span>Read more</span>
</div>
</div>
<div class="guestcard">
<img src="resources/assets/images/information-guest-lecture.jpg">
<div class="guesttext">
<h2>Our guest gecture</h2>
<p>Join a keynote with Oliver Sack about music in medical treatment</p>
<span>Read more</span>
</div>
</div>
</div>
</div>
<!--classes-->
<section class="classes">
<h1>Start learning</h1>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</body>
</html>
