Problem about width when smaller the screen

I have a problem when doing responsive. I set width of navbar 100% and width of welcome section 100% but the problem is when smaller the screen there is a space in the end of both sections. I have no idea what I’m doing wrong. I attached the picture of the issue.

source code : https://codepen.io/beerbluedevils/pen/abZaOBq

1 Like

Hi @beerbluedevils. I think it’s because the quotes section’s width is wider than the header and menu. That’s the reason there is a horizontal scrollbar.

1 Like

I try to add border to check the container but the width is equal. So I’m not really sure how to adjust.

2 Likes

But, look at this:

The quotes are overflowing out of the box. You would want to stack them top by top in small devices and that will fix it.

Also, the footer has extra width too:

image

1 Like

Thank you. I will try fix it.

2 Likes

I fixed it by set
margin:0 and
padding:0
in media query class nav ul.

3 Likes

Good job! Now it looks nice. I see that you adjusted the font size also. Keep it up!

2 Likes

Thank you bro. I try to code everyday to improve my skill.

1 Like