Technical Documentation Page Formatting

[salehe1]

My technical documentation page moved the main section to the bottom of the page after I moved the navigation bar to the left side to satisfy the test requirements and put the main part to the right. Now I’m stumped on how to fix it after giving it a few tries so anybody have a clue what could be wrong? 2 of the images also won’t load on mobile but they do on my MacBook so I’m not sure whatsup with that. This is the final part holding me back from claiming my certificate although I could do it now, but I’m mad that it won’t format properly and looks horrible if I’m to send it to friends and family on mobile so any help is greatly appreciated.

Here is the webpage https://saleherehani.github.io/technical_documentation_page/

And here you can find the code GitHub - SaleheRehani/technical_documentation_page

[Jaydog]

I am not very good with floats to be honest. I used grid for my Technical Documentation Page as I find it much easier for layouts.
You could try giving the body a whitespace:nowrap; declaration. I remember trying to put 4 x25% pictures in a row and they refused to fit but when I used the whitespace trick they did. Also could try box-sizing:border-box; as this helps avoid margin & padding being added on top of your box sizes.
Doubt these will work but worth a shot until an expert pops up

[salehe1]

Managed to fix it actually by deleting some div tags. Thanks for the help anyways!