Position fixed question?

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

Here is code:

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

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



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;

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%);

That doesnt fix strange width change!

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

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;