Please help me in figuring out this problem. For the attached html and css I am getting that extra margin on the right side which I dont need. What changes should I make. Please tell me your suggestions. I am new to web development. Thank you.
What I have already tried is to change the position of hero from relative to fixed and it/remove the extra margin, but that makes my header to cover all the page and the rest content wont show.
Following is my code. 3rd image that is ‘browser output screenshot’ shows that I get unwanted margin or whitespace on the right hand of my page. Scrollbar also becomes scrollable because of this margin. I have marked the margin with a vertical red line. How can I edit my css to remove that margin and make my page unscrollable. Thank you.
2
Answers
Wish I could comment, but please provide the entire code in your question, instead of providing screenshots, for us, to reproduce and answer properly.
You need to change the
widthof.herofrom100%to100vw& trying not to use
position:relativein this case