how do I stop a conflict between inline-block and text align?

February 3, 2023

I am trying to make a simple top bar

as a way to put things I’ve been learning into practice so I’m not exactly looking for a work around as much as I am looking to understand what is happening and fixing it so I can apply my recently learned knowledge.
(sorry if this can come out as rude)

visually speaking it should be something like this:

||_______________________centered-title___________button1__button2||

but I am unable to center the title properly.
After I added the inline block to the centered title I am unable to move it from the left as text align stopped having a effect on it

here is my code

html

</head>
<body>
    <header class="contenedor">
        <div class="logo">
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>

        <div class="derecha">
            <nav class="contacto">
                <ul>
                    <li><a href="#">SOCIALS 1</a></li>
                    <li><a href="#">SOCIALS 2</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

CSS

* {
    margin: 0;
}

body {
    background: rgb(15, 17, 26);
}

.logo {
    text-align: center;
    display: inline-block;
    font-family: "Oswald";
    line-height: 70px;
}

header {
    background: gray ;
}

.contenedor {
    overflow: hidden;
}

.derecha {
    float: right;
}

header .contacto {
    display: inline-block;
}

header .contacto ul {
    list-style: none;
}

header .contacto ul li {
    display: inline-block;
    line-height: 70px;
}