You can, first of all, make it easier for yourself to position the content and sidebar by toggling the box model for the two elements (#content and #sidebar), so that the padding and the border do not affect the width of the elements.
Assign the following property to both elements:
On mobile devices both elements should still appear underneath each other. We only need to add a couple of spaces:
Assign the content area a padding of 1.5rem, for instance, and a margin-bottom of 1rem.
The sidebar is also given a padding of 1.5rem, but only on the left and right.
This completes the definitions for mobile devices. However, from a screen width of 801px the sidebar should appear on the right next to the content.
Insert after the selectors for #content and #sidebar a breakpoint for a min-width of 801px. Change the properties for both elements there as follows:
Padding: 1.5rem top, 1.5rem right
Do not be alarmed even though the float makes the page seem fairly disjointed at present. Help is at hand with a Clearfix:
Start by defining a new class using the
Then assign this class in the HTML file to the body.
This should at least ensure that the body is restored to its full height.