Why does a box that has position: fixed float to the right?

Question

css

Good afternoon!
The header of the rendered page protrudes 15 pixels to the right of the parent element. Empirically established that if you remove from the styles position: fixed, then the block falls into place. But I need a fixed header!
The parent block is a responsive container from Bootstrap.
Please tell me how to remove the offset?

.container-fluid{
    width:100%;	
  }
  header{
    background-color:#acab95;
    height:60px;
    width:100%;	
    line-height:60px;	
    font-size:28px;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    position: fixed;				
  }

Answer 1

Block with position: fixed; is positioned relative to the browser window, and if we do not set top, left, top, bottom properties to the positioned (absolute/fixed) block, then its location remains in the same place as before positioning. And this is just your case.
container-fluid has 15px padding on the sides, which is why it appears to be offset to the right by 15px
In short, left: 0;
Here is codepen.io/corvus-007/pen/VvzZKz?editors=110

Answer 2

Try setting left: 0;