Trouble centering elements in media query

HTML-CSS
#1

Hey guys,

My page.

At 960px< I want the contents of my .star-cards to be centered. I don’t know why they’re not. I’ve tried to change the original .star-cards back to ‘center’ as originally I changed their position for full desktop viewing. But as you can see, they’re slightly off center.

Also, is ‘block’ the correct way to get the ‘reviews’ under the ‘5 stars’?

Thanks guys.

mobile-design
mobile-design375×1530 74 KB

#2

remove display:flex; from .star-card-container

.star-card-container {
  flex-direction: column;
  margin-left: auto;
  width: 40%;
}
1 Like
#3

You have a margin-left on .star-card p.

Also just note that the centering will work as it does with text (ragged, the content amount determines the start/end of the “center”).

1 Like
#4

I didn’t see that! Thank you