Solution using plain HTML and CSS

@prchristie great work on this challenge it looks amazing !

As for your weird responsive resizing issue with background ect, I can't explain why it happens but it's a common thing I've found. I've check your site in my browser and from what I can see it only happens at sizes that are so small / narrow you wouldn't encounter a screen that small in real world usage, so I would not stress at all on this!

A couple of bits of constructive criticism I have is:

1- My thinking on a component of this size is that so many css files are unnecessary and actually make it harder to read what is happening, could all be combined in to one... just my personal opinion.

2- I didn't notice any css reset. Its always good to use a css reset as the first selector in your stylesheet such as something basic like this:

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

or for something more advanced you could look at this Josh W's Css Reset

Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

Please mark this answer as helpful if it is, Happy coding