Header for website bleeds over 100% width

Question

This is my CSS for the header:

#header {
    font-size: 3rem;
    width: 100%;
    height: 4.5em;
    display: flex;
    align-items: center;
    padding-left: 1em;
}

As you can see, it is set to 100% width. On the website however, it shows up like this, with a horizontal scroll bar at the bottom:

For some reason, the header extends past the html tag. overflow: hidden does nothing. 100vw doesn't change anything either. My other divs' width is also 100%. Not getting any errors in the console. Here is my html:

<body onload="setBgColors()"> <!-- function that sets certain background colors using Colorthief is called on load -->
    <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>
        </li>
        <li data-tab-target="#learn">
            <div class="tab-button">
                Learn
            </div>
        </li>
        <li data-tab-target="#more">
            <div class="tab-button">
                More
            </div>
        </li>
    </ul>
...
</body>

The rest of my CSS:

.flag-container {
    width: calc(2.75em + 10px);
    height: calc(2.75em + 10px);
    background-color: #fcfcfc;
    border-radius: 50%;
}

#flag {
    width: 2.75em;
    height: 2.75em;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #ffffff;
}

#title {
    margin-left: 1em;
}

#edit-button {
    font-size: 1.5rem;
    width: 3em;
    height: 2em;
    border-radius: 5px;
    margin-left: calc(100vw - 33em);  /* for edit button to be always on the right side of the screen relative to the vw*/
}

/* tabs */

.tabs {
    width: 100%;
    height: 3.5rem;
    display: flex;
}

.tabs li {
    width: calc(100% / 3);
    height: 100%;
}

.tabs div {
    font-size: 1.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Help would be appreciated.

Can you confirm that any other element affects the size? Please check each element and use the reset CSS (you can search about it). — ht13, Feb 13 '21 at 18:02
@Timato24 Dear Friend ! Please check my answer.Let me know if you need any other help. God Bless — Imran Rafiq Rather, Feb 13 '21 at 18:06

score 2 · Accepted Answer · edited Feb 13 '21 at 18:04

2

The problem seems to be with the padding-left property on the header.

#header {
    font-size: 3rem;
    width: 100%;
    height: 4.5em;
    display: flex;
    align-items: center;
    padding-left: 1em; /* Here is the issue */
    box-sizing:border-box; /* Try this solution */
}

You can make sure box-sizing:border-box is set either on header or on all the elements.

From MDN:

The box-sizing CSS property sets how the total width and height of an element is calculated. [See More]

You can also set box-sizing:border-box on all the elements by using basic reset at the top of your CSS file:

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
}

edited Feb 13 '21 at 18:04

Justin Taddei

2,142
1
16
30

answered Feb 13 '21 at 17:59

Imran Rafiq Rather

7,677
1
16
35

1

I was about to edit that after removing padding-left, the issue was gone, but that I wasn't sure how to keep the padding. This works though, thank you – Timo Feb 13 '21 at 18:07
1

@Timato24 Anytime Mate. It's my pleasure. I was kind of busy with office work from some time. Am starting to help fellow developers again just from today here at Stackoverfow. Feel free to reach out to me on any issue related to front end, React etc :-) – Imran Rafiq Rather Feb 13 '21 at 18:09

Header for website bleeds over 100% width

1 Answers1