Why is there a small amount of space to the left of this p element

HTML-CSS
1

I can’t figure out why my left p element (inside the blue border) has a small amount of space to the left of it:

https://codepen.io/El_Escandalo/pen/NWGvYoa?editors=1100

2

Hey Escandalo!

I think it has something to do with the absolute positioning and the 50% width of the .inner-box p. I can really get frustrated with CSS and trying to do pixel perfect layout.

What are you trying to achieve with the layout? Or just experimenting?

I would work with those widths and see what happens. Trial and error is sometimes the best way to figure things out.

1 Like
3

Add right: 50%; to .inner-box p. That will remove the undesired margin.

1 Like
4

@Newman5 Thanks. I’m just messing around to try to understand the behavior. Frankly I find plain CSS to be more confusing than Flexbox/Grid etc.