Div tags moving along when zooming

Question

I am pretty new at HTML, and I am experimenting with some div tags to move along when zooming in or out the page. The structure of my HTML code is:

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>

And the corresponding CSS code:

header{ 
    padding-left: 260px;
    padding-top: 65px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

Both my title and the logo image moves when zooming.

Any help would be appreciated.

Regards.

Answer 1

That is because you use the padding-left to change the position of the full header, but also you use the px unit which makes its position seems keep changing in different screen size.

A solution is to use percentage instead or use media screen query.

An off-topic suggestion, it is not always a good practice to use padding to change position, use margin is always better.

*This is an example use percentage you could change based on what you want.

header{ 
    padding-left: calc(20vw);
    padding-top:calc(5vh);
    padding-right: 0;
    padding-bottom: calc(10vh);
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>