Pure CSS and HTML

Looking good.

A few things I would try instead. I would remove the margins on main and instead add some flex properties to the body to position the content in the dead center.

align-items: center;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;

Adding the above to the body will center things for you. Also, you don't need to add the width: 100% on the button if the display is set to block. The 100% is actually causing the button to spill outside of its container. Display set to block is 100% essentially. 

I would also take a look at the padding of the containers on mobile. Seems to be a bit too tight.

Lastly, the content width is being set to 50vw so it is like 50% of the screen. The container seems too skinny right before it switches to mobile. Not totally responsive even though technically it is.

Other than those few things, you are doing a great job! Keep at it.

Thanks a lot for your quick response, Eric! I'm going to definitely take a close look at what you said for future challenges :) and do these fixes.