Landing page - top border cut off pricing box and can't center

HTML-CSS
1

https://codepen.io/jacobrford/pen/rNNLoXo

I’ve been trying for hours to figure out why I can’t get the two pricing boxes to center within the media query when the display width is shortened.
Also, the top border is cut off for both pricing boxes. When one box is on top of the other, the one on the bottom does not have its border cut off, but I can’t seem to figure out what I’ve done wrong in the previous section or the pricing section to make this happen.

Thanks in advance!

2

In the media query, the pricing div is set to be a vertical flexbox (flex-direction: column). That means the justify-content property now works vertically. To center horizontally on a vertical div use align-items: center instead.

I can’t find anything wrong with the pricing box borders though. Or I might be looking at the wrong thing.

3

Maybe it’s just my browser…I looked in another and the top border is ok.The align-items fix worked. (Being so new at this, in can get confusing which property to use in which situation.) Thanks so much!