Why can't I get my items to be a row using flexbox?

HTML-CSS
#1

So for my Landing Page project I am making a website for a fictional online mattress store. Here it is: https://codepen.io/amelia42188/pen/BPrrxz

So under the category “Our Mattresses”, I can’t get the three icons (Sealy logo, Serta logo, and Simmons logo) to line up. Honestly, I had a difficult time learning flexbox and it really still doesn’t 100% make sense. I thought that since I put in flex-direction: row; and flex-wrap:wrap; that it should line them up in a row. I would like them to be all in the same row.

Can anyone offer me advice on how to achieve this? Thanks in advance!

#2

I like using this cheatsheet:

Go to align items and see if that might help.

1 Like
#3

your images are huge and that’s why they don’t fit on a single row.

Try adding this:

#sealy {
  width: 100px;
}
#simmons {
  width: 100px;
}
#serta {
  width: 100px
}
1 Like
#4