Each time I create a new page, there is a slight horizontal scrolling issue that occurs. When the page scrolls horizontally, it leads to a white space where nothing exists beyond the footer and header at the edge of the screen. Even though it's just a small amount, it's quite bothersome because the scroll bar occupies unnecessary space on my small laptop. [notice the white space to the side of the header.][1] [1]: https://i.sstatic.net/mHSDx.png
Since this problem persists on every single page, I suspect it has something to do with the CSS styling for either the header or the footer. However, I'm finding it challenging to pinpoint the exact cause. I have attached both my CSS code and the HTML for my homepage below.
I am seeking assistance in resolving the issue of horizontal scrolling.
CSS:
#navbar {
background-color: #1A409F;
position: center;
}
#NavBrandText {
color: white;
text-decoration: none;
font-style: italic;
font-family: Helvetica-UltraCompressed;
letter-spacing: 1px;
padding-right: 80px;
}
@font-face {
font-family: Helvetica-UltraCompressed;
src: url(Helvetica-UltraCompressed.otf);
}
// More CSS code here...
Home Page HTML
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Relevant Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
// More HTML code here...
</body>
</html>
Thank you, Pilot640