Trouble aligning logo

This is my CSS:

/* Parent Container for the Logo */
.logo-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 60px;
z-index: 1;
}

/* Logo Container */
.logo-container {
position: absolute;
top: 10vh;
left: 50%;
transform: translateX(-50%);
text-align: center;
max-width: 90%;
box-sizing: border-box;
}

/* Logo Styles */
.logo-container img {
max-width: 100%;
height: auto;
display: block;
}

/* Responsive Styles */

@media (min-width: 3840px) {
.logo-container {
top: 5vh;
left: 43%;
}
}

/* Large Screens (2560px and 3840px) */
@media (min-width: 2251px) {
.logo-container {
top: 6vh;
width: 55%;
}
}

/* Desktop and Large Screens */
@media (min-width: 1200px) and (max-width: 2250px) {
.logo-container {
top: 8vh;
width: 45%;
}
}

/* Tablet Screens */
@media (min-width: 768px) and (max-width: 1199px) {
.logo-container {
top: 10vh;
width: 60%;
}
}

/* Small Mobile Screens */
@media (max-width: 767px) {
.logo-container {
top: 8vh;
width: 50%;
}
}

/* Extra Small Mobile Screens (360px width) */
@media (max-width: 550px) {
.logo-container {
top: 8vh;
width: 80%;
}

.logo-container img {
    max-width: 100%; 
}

}

And it seems it does not work on my different pages. The only thing that is different on the other pages is just text. So even if I align it right on one page, it doesnt align right on the other page. Think I struggled with this for 500 hours now….