It's easiest to start with some pre-built styles such as bootstrap. ref: https://getbootstrap.com/ They already have templates that will give you a sticky footer and a more modern horizontal navigation that behaves appropriately in mobile sizes e.g. https://getbootstrap.com/docs/5.3/examples/sticky-footer-navbar/

"I would like my header to span the full width of the page, and it is not."

Browsers normally have an automatic style for margin that you need to override. E.g. body {margin: 0}

"I would like my footer to not be seen until scrolled down to and then to stay at the bottom of the page"

Have a look at how the bootstrap example achieves this using flex.

"I would like my nave to be flush with the left side of the screen and stay there."

See above answer about auto margin in browsers that you need to override

"I have played around with gridbox, float,...."

Check out flex.