Tell us what’s happening:
Hi!
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
https://codepen.io/Krozy/pen/WVbgPo?editors=1100
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!
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.