Position fixed question?

1

Im testing around with position fixed. I havent used HTML and CSS for a while because i was doing other things and being focused on UX UI lately. I set my boxes to be all 60% of width while centered with margin 0 auto. I have given each box its own class box1, box2 etc… then on box1 i put position: fixed, later when i move the box over the other boxes i noticed that box1 with given position of fixed now has bigger width than other boxes even though they have all the same width of 60%. Can someone explain this to me? I used 500px instead of 60% later, and width was the same again but not when i use % instead of px. Why is this?

As you can see Box1 is a bit bigger in width when given position fixed

Screenshot_1
Screenshot_11919×915 47.9 KB

Here is code:
HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        
        <h1>HTML and CSS termin 6</h1>
        
        <div class="wrapper">
            
            <div class="box box1">
                <p>Ovo je Box 1</p>
            </div>
            
            <div class="box box2">
                <p>Ovo je Box 2</p>
            </div>
            
            <div class="box box3">
                <p>Ovo je Box 3</p>
            </div>
            
            <div class="box box4">
                <p>Ovo je Box 4</p>
            </div>

        </div>
        
        <div class="footer"></div>
        
    </body>

</html>

CSS:

body {
    padding: 0;
    margin: 0;
}

h1 {
    background-color: aqua;
    text-align: center;
    padding: 10px;
    font-size: 3em;
    margin: 0;
}

.wrapper {
    background-color: #ccc;
    padding-right: 20px;
    padding-left: 20px;
}

.box {
    width: 60%;
    padding: 60px;
    margin: 0 auto;
}

p {
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

.box1 {
    background-color: blue;
    position: fixed;
    left: 17%;
}

.box2 {
    background-color: red;
}

.box3 {
    background-color: orange;
}

.box4 {
    background-color: green;
}

.footer {
    background-color: #bbb;
    padding: 90px;
}
2

You cannot do margin: 0 auto; trick for out-of-flow boxes, that’s true, you need to use this instead:

...
left: 50%;
transform: translateX(-50%);
...
3

That doesnt fix strange width change!

EDIT: I removed paddings from wrapper and its better now. Idk why lol

4

That was because boxes except box1 were in document flow and wrapper padding settings was affecting them. You can fix it with box sizing reset:

* {
  box-sizing: border-box;
}