Here is the CSS code I used for styling the header:
#header {
font-size: 3rem;
width: 100%;
height: 4.5em;
display: flex;
align-items: center;
padding-left: 1em;
}
Despite setting it to 100% width, on the website it displays with a horizontal scroll bar as shown in this screenshot.
The header seems to extend beyond the HTML tag, and using overflow: hidden or adjusting to 100vw doesn't seem to resolve the issue. Other div elements also have a width of 100%, and no console errors are present. Below is an excerpt of my HTML markup:
<body onload="setBgColors()"> <!-- Function to set background colors -->
<div id='header'>
<div class='flag-container'><img src="images/tree.png" alt="Flag" id="flag"></div>
<h1 id="title">Fussajle</h1>
<button id='edit-button'>Edit</button>
</div>
<ul class="tabs">
<li data-tab-target="#overview">
<div class="tab-button" id='default-button'>
Overview
</div>
...
</body>
Below are additional CSS styles applied to different elements in the layout:
.flag-container {
width: calc(2.75em + 10px);
height: calc(2.75em + 10px);
background-color: #fcfcfc;
border-radius: 50%;
}
/* Remaining CSS styles omitted for brevity */
.tabs div {
font-size: 1.5rem;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
If anyone can offer assistance in resolving this issue, it would be greatly appreciated.