Header issue - CSS Transform (parallax )

Question

this is my parallax header. The problem is that using the transform property to get a better parallax effect, the whole header got bigger and went outside the borders. How can i fix this?

header {
    border:none;
    color:black;
    background-image:url('<?php echo $imgURL ?>');
    height:100vh;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;
    transform: translateZ(0px) scale(1.1);
    z-index:0;
    overflow: hidden;
}

Answer 1

While it's hard to tell without seeing your HTML or a JSFiddle, my bet is the problem is with this property:

header {
    ...
    transform: ... scale(1.1)
    ...
}

Since the header element is (most likely) a block level element, it takes the most space in width available to it. Then you scale it up by 10% and it becomes larger than its container. That's my bet anyway.