Trouble with margins/centering

I’m having trouble trying to center my elements on the page. I’ve tried using margin auto but everything sticks to the left when I make the view wider? All my tests pass but I want to get more comfortable with the CSS. I’m still very new to this so my code may be a mess.
https://codepen.io/camper-jbo/pen/QWGGVKw

auto margins on the side are definitely a possible solution here. The key is to figure out which element you should put them on. I would open your browser’s dev tools inspector and start testing auto side margins on elements until you find the one that works. I think in this case it is going to be obvious pretty quickly which one needs the auto side margins because it is the one element that contains everything on the page.

It wasn’t that I didn’t have my margins right, I had a display flex that was making everything act strange that I overlooked but thanks for your quick response.

Yep, since you have display: flex set on the body you could also take advantage of justify-content to center <main>.