How is the space around my flex items so tall?

I want there to just be a rounded border around each one instead of the huge empty space it currently has. How can I get it to fit the content?

https://github.com/astrickland311/google-search-results

https://astrickland311.github.io/google-search-results/

bump

It would be helpful if you provided specific details regarding your problem, like what element you are referring to that has a “huge empty space”. The more specific information that you can provide, the easier it is for people trying to answer your question.

I think you might be talking about the flex items inside flexbox-container-2. When I look at your page, using dev tools, I can see that .flexbox-item-2 has a min-height: 200px. Using dev tools is the easiest way to trouble-shoot problems like this.

If this is not the problem that you were referring to, please provide more specific details. Also, here is a link that I highly recommend about how to ask good coding questions: https://medium.com/@gordon_zhu/how-to-be-great-at-asking-questions-e37be04d0603

@rlmoser99 Thank you for encouraging me to take another look at my messy code. I was able to figure out the problem. I did not realize that I had two rule sets using the same .flexbox-item-2 class. Once I changed the class name in the html and related css, the sizing problem was resolved. Then, I noticed the text would not center exactly and was grey. I looked for other rule sets that might’ve been conflicting with that. I found I had created a rule with for the “a” tag and that was effecting the text in the containers. I then made a rule set with a.image-terms as the selector to be more specific with the text in the containers and fix the text there.