Hello,
I took a moment to go back to try making my Quote Machine project more responsive/relatively sized. I started by using Chrome dev tools to view my page in mobile, and I immediately noticed that my main div was not centered. It’s not obvious to me why the mobile view would leave the div uncentered, and I would like some help rooting out the problem.
Also, if anyone has an opinion in the em/rem vs. reference pixel debate, please chime in and try to assuage my confusion!
Well, your main div is centered.
I’d suggest you read shay howe guides about html and css. It may take you a couple days but after that solving this problem should be a breeze for you. If you still won’t be able to fix it, ping me up.
Thanks for the guide. Will definitely work through those! Just for clarification though: was the main div centered even in mobile view (actual phone, dev tools device views, etc.)?
Yes, it may seem it’s not because there’s one naughty element that makes the container take a lot of empty space at right hand side.
Excellent! Thanks for the tip 
Edit: found it. BUTTONS!! 
Edit2: after doing some math, I figured out that the .buttons div’s total width was being calculated as the sum of its content (80px*2 + 10px) and the left offset (470px) when the page was viewed in the mobile or responsive views provided by the Chrome dev tools. The fix was to 1. review relative vs. absolute position and 2. fix the .buttons class div to position itself relative to its parent .buttonbox div. I’m still not 100% sure why the total width (when relatively positioned) includes the offset, but I’m hoping that reading more about CSS position while I’m not sleepy will eventually bring me to an answer. For posterity, here’s a link to an older, broken fork: http://codepen.io/HeapOfPackrats/pen/GrGEvE