While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without any clear reason.
I attempted using overflow:hidden, but it caused issues with my sticky navbar. I also tried overflow:clip, but it did not solve the problem. I was hoping to eliminate the extra white space when viewing the website on my phone.
The issue was resolved by realizing that I had specified a width in my CSS as width:998px;. When shrinking the browser window, the media queries were attempting to adjust elements to fit, but the fixed width caused them to extend beyond the viewport, creating the white space on the right side.