Header keeps getting out from extreme right

Question

I made a website, it looks good but the header goes out of bounds from the right, I followed a tutorial and then did exactly like he told but then also I couldn't fix it. Here is my CSS of header component: As you can see, TESLA ACCOUNT going out of bounds.

Component code: (added just for divs info)

const Header = () => {
    return (
        <div className="header">
            <div className="header__logo">
                <img src={TeslaLogo} alt="Tesla Logo" />
            </div>
            <div className="header__models">
                <p>MODEL S</p>
                <p>MODEL 3</p>
                <p>MODEL X</p>
                <p>MODEL Y</p>
                <p>SOLAR ROOF</p>
                <p>SOLAR PANEL</p>
            </div>
            <div className="header__rightStuff">
                <p>SHOP</p>
                <p>TESLA ACCOUNT</p>
            </div>
        </div>
    );
}

CSS code

.header {
    display: flex;
    background-color: transparent;
    background: none;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100vw;
    top: 0;
    margin: 1rem;
    z-index: 100;
}

.header is the main div for HEADER.

(I added margin:0 padding:0 in index.css to reset website margin and padding, didn't work).

What about `width: 100%; margin: 1em 0;` if not it's some other element I believe. — lharby, Jan 18 '21 at 05:44
please add `left:0;` and `right:0;` i guess it will solve your problem — Prakash Rajotiya, Jan 18 '21 at 05:49
@lharby didn't work, (it did pull it inwards but only by a very small amount), after adding `padding: 0.2rem 1.9rem` it did pull it as required but it is not the optimum solution right. — dev1ce, Jan 18 '21 at 05:54
@dev1ce have you tried to use !important for the margin and padding on the body ? — godfather, Jan 18 '21 at 06:10
@godfather `!important` is an [absolute last resort and should only be used if you know what you're doing](https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/) — Jon P, Jan 18 '21 at 06:11
i suggested !important becasue he said that he tried to reset margin and padding and didnt work — godfather, Jan 18 '21 at 06:14
@JonP here is the whole project: https://codesandbox.io/s/crazy-wind-dl6hz Though i fixed it temporarily by applying some padding but that's not the optimum solution. — dev1ce, Jan 18 '21 at 06:22
@godfather yes i tried !important, it destroyed the layout :D — dev1ce, Jan 18 '21 at 06:22

score 2 · Accepted Answer · answered Jan 18 '21 at 06:16

Width does not include margin, so you need to subtract the margin from your width.

.header {
    display: flex;
    background-color: transparent;
    background: none;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: calc(100vw - 2rem); /*Both left and right magin = 2rem*/
    top: 0;
    margin: 1rem;
    z-index: 100;
}

Header keeps getting out from extreme right

1 Answers1