Header keeps getting out from extreme right [duplicate] - html

Question

This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 2 years ago.
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).

Answer 1

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;
}
More on calc