Tictactoe absolute positioning not working?

1

Hi all - can someone please help me understand what I am doing wrong with my positioning? I have tried to position the various child elements of my container-fluid div with absolute positioning…I thought it was working until I noticed when I resize the page, they are all still moving relative to one another! Not a lot, but enough to look weird if someone resizes the window. I feel like I’m just missing something really obvious but cannot see it!

Thanks for any assistance.

heres the pen:

2

Nevermind, all. I think I’ve got it now.

3

Well. I see you have a lot of “WTF” in your css.

You’ll notice that if you go down to small screen size that half the board is hidden on the right and you’ve got a bunch of empty space to the left.

What I would suggest is just wrapping all of that in a div and setting it’s margin to auto. I think that’d keep everything centered on the page with less hassle than what you’re doing with padding, etc. Something like this:

.div-that-holds-everything{
  display: block;
  width: XXXpx;
  margin: auto;
}