This is my first time making a HTML/CSS website so bear with me, I still have a lot to learn. I’m trying to make sort of a TMZ or US Weekly type of site with news articles, but I can’t seem to get the responsive header correct.

I’m trying to make my responsive header look like US Weekly’s, but with the logo in the middle, and my links on the left and right side. I want them to be inline, but they’re block. Here’s my code:

        <div id="header">
            <div id="logo">
                <h1><a href ="#">Celebrity Times</a></h1>
            </div>
             <div id="leftside">
                <a class="links" href="#">Menu</a>
                <a class="links" href="#">Tips?</a>
            </div>
            <div id="rightside">
                <a class="links" href="#">Newsletter</a>
                <a class="links" href="#">Subscribe</a>
            </div>
        </div>

#logo {
    text-align: center;
    font-size: 52px;
}

#leftside {
    text-align: left;
    font-size: 30px;
}

#rightside {
    text-align: right;
    font-size: 30px;
}

I tried a bunch of different things to #header but it’s not working. How do I do this?