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?
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.