Can't get P element in flexbox to fit inside orange border

[jalal_b]

Tell us what’s happening:
The .htu-p element isn’t completely fitting inside the orange border at the bottom of the page. Any ideas?

Your code so far
https://codepen.io/jalal_b/pen/ZEpmzzX

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org

[ozanbaskan]

Hi, the main reason is that it is actually inside of that div element, your background gradient is confusing you to see the actual width of the div element. I suggest to use borders in such situations.

I tried a couple of changes in your page, here, examine this

[jalal_b]

Thanks so much for your work! Do you mind telling me a brief explanation of what you did and why? I’m trying to learn as much as possible so that would be very helpful. Thank!

[ozanbaskan]

Of course, first I relocated your div class=“htu-subflex” element so it only includes your p element and not your h4 element, because in that way the p element would automatically be inside that orange square.

After that I arranged your div id=“htu-flex” element so it would look centered and nice. And also gave your two elements a size of vw unit so they would fit the screen nicely in different resolutions.

I recommend to use @media for responsiveness also, for different devices especially.

Edit: Most importantly, I deleted your gradient background and added a one-color background color property instead.