Keep width while using position: fixed-CodePudding

I'm trying to figure out how to keep the width of a div when using position fixed, the fixed div has an extra width

.col-1 {
    background-color: blue;
    height: 58px;
    border-radius: 12px;
}

.fixed {
    z-index: 9999;
    position: fixed;
    background-color: red;
    margin-top: 100px;
    width: 100%;
}

<div class="col-1">Test</div>
<div class="col-1 fixed">Test</div>

CodePudding user response：

You can add left: 0; and right: 0; to the .fixed div to achieve 100% width

.fixed {
     z-index: 9999;
     position: fixed;
     background-color: red;
     margin-top: 100px;
     width: 100%;
     left: 0;
     right: 0;
}

This won't look exactly the same due to the first div having margin applied to it coming from the <body>, giving it the white space you see around it. I'd advise removing that margin using a reset to achieve the same width.

An example:

body {
   margin: 0;
}

Of course if the margin was intended to be there you can set the left and right to match whatever that is, in this case 8px.