<body>
<div class="flex-container">
<div class="img-section">
<img src="images/drawers-square.jpg"/>
</div>
<div>
<p>Shift the overall look and feel by adding these wonderful
touches to furniture in your home</p>
<p>Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.</p>
<p>Michelle Appleton</p>
<p>28 Jun 2020</p>
Share
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
My code doesn’t center the block, it just moves the text slightly. Does anyone know why?
<body>
<div class="main-container">
<div class="flex-container">
<div class="img-section">
<img src="images/drawers-square.jpg"/>
</div>
<div>
<p>Shift the overall look and feel by adding these wonderful
touches to furniture in your home</p>
<p>Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.</p>
<p>Michelle Appleton</p>
<p>28 Jun 2020</p>
Share
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
Note that if you give your main-container min-height:100vh and you haven’t negated the margins on the body then main-container will extend past the bottom of the viewport when it may not need to as it will not start at the very top of the body…