Actually the “moving all over the place” is kind of the point–“responsive design” (https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ , https://en.wikipedia.org/wiki/Responsive_web_design). That’s why, as you narrow the window, your “project” tiles put fewer and fewer in a line–wider for a desktop, narrower for a phone. And your home background image resizes because you have it set to
width: 100%; (and
background-size: cover;, which is not saying the same thing–I’m not sure which takes precedence). You’re saying “this should be as wide as the screen,” so as you change the screen size the image resizes (or, with
background-size: cover you’re saying “make this as wide or tall as needed to ensure that the whole screen is covered, even if it might crop the image”). Which is all what you want, I believe.
Meanwhile your code is actually looking pretty good. A few unsolicited pointers, though:
- Keep an eye out for anywhere that Codepen is highlighting your code in red. There are few
</div>s that aren’t closing any opening tag, and a few self-closing elements like
<hr> that don’t need a closing tag. These are not terribly big deals, but failing to close something is!