FlexBox CSS Issue

Greetings everyone,
does anyone know how to get rid of the yellow edge on the right? No matter how I align-items it still shows up not even margins or paddings help. Any help is appreciated! Thank you!

I would be that your problem would be easier to fix without all that inline styling. Take everything from every style attribute in your HTML and move it to your CSS. Do the same for your JavaScript, binding your event handlers with the rest of your logic rather than in the markup.

I don’t style my game div in the markup, that is the one that is causing the edge.

Set a margin (left and right) on the items in the middle column. Or just a margin-left on all items.

Tried, margin-left did not work as if FlexBox overrides it or something.

My bad, margin-right.

Sorry, can’t seem to get it to work, I even tried with the nth child. No go.

.tile{
  ...
  margin-right: 5%;
}

And as @PortableStick said, never use inline styles. It makes your HTML messy and very difficult to check if something doesn’t work as expected.

2 Likes

That did it! thank you so much! I just think that if I do inline styles then I free up the css and i dont have to do all the styling there. Thank you so much Ben!
:cookie: