Right side padding of flex element not showing

Tell us what’s happening:
I’m working on the product landing page challenge and I can’t figure out why the right side padding of my header element is not showing.
Could someone please explain what I’m missing?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

Link to the challenge:

Try changing the header spacing from “space-between” to “space-around”.

Something that helped me a lot was adding border: 1px solid red; to different elements to see exactly what I am adding padding or margin to. Since you have red you could use a black border.

@danh4648 Thank you for your reply!
Changing “space-between” to “space-around” didnt solve the padding issue as there was more space on the left side than on the right.
I ended up removing the padding and setting a “margin-right” to the element inside the header which got me the result I wanted.
Ive been setting background colors to the elements to help me visualize them as in the lessons but I like the border idea!

1 Like

Ya I got the border idea from someone else and I use it a lot. Background color would work well too I think.

I always have to keep tinkering and trying different settings to get the result I want. In codepen I would do forks and forks of forks so that I wouldn’t lose my original code lol.