How can I arrange HTML elements horizontally?

Question

I have looked around Stack Overflow for an answer to my problem, but nothing seems to work. I am trying to create a horizontal navbar for my site. I have made one before, so I just copied the CSS and HTML code over, but it didn't work. I tried coding it again by hand, and using float: left and display: inline-block but still no luck.

HTML:

<div class='navbar'>
    <p class="active"><a href="index.html">Home</a></p>
    <p><a href="explore.html">Explore</a></p>
</div>

CSS:

.navbar a {
    display: inline-block;
}

Answer 1

You do not need the paragraph (<p>) tags, those are only for actual paragraphs, that would need to have line separations between them. If you are just creating buttons on the same line, you do not need them.

Example:

<div class='navbar'>
    <a href="index.html">Home</a>
    <a href="explore.html">Explore</a>
</div>

Answer 2

use the flex for navbar style, for example, try follow code:

.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

this code arrange elements from left to right and set vertically align center.