How can I bring these inline block elements to one place?

November 20, 2022

CSS:

.navbar a:link, a:visited {
    background-color: goldenrod;
    color: black;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
}

.navbar a:hover, a:active {
    background-color: rgb(121, 130, 255);
}

HTML:

<div class="navbar">    
    <a href="html/home.html" target="_blank">Home</a>
    <a href="html/about.html" target="_blank">About Us!</a>
    <a href="html/properties.html" target="_blank">Property List</a>
    <a href="html/terms.html" target="_blank">Terms & Conditions</a>
    <a href="html/contact.html" target="_blank">Contact Us!</a>
</div>

I’m kind of a beginner to web development and trying to make websites with CSS, HTML only so I’m stuck on this issue where I can’t seem to find how to get all those buttons to the place (Marked with red) in center

I tried searching around on google and well it resulted in failure, tried some properties like

align-items: center;

thinking that it’d work but nope.

Please help! thank you!

>Solution :

Assuming that the goal is to center the buttons (could not seem to find an area marked with red), you can style the container .navbar:

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

More about flex layout

Hope this will help.

Example:

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

.navbar a:link, a:visited {
    background-color: goldenrod;
    color: black;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
}

.navbar a:hover, a:active {
    background-color: rgb(121, 130, 255);
}

<div class="navbar">    
    <a href="html/home.html" target="_blank">Home</a>
    <a href="html/about.html" target="_blank">About Us!</a>
    <a href="html/properties.html" target="_blank">Property List</a>
    <a href="html/terms.html" target="_blank">Terms & Conditions</a>
    <a href="html/contact.html" target="_blank">Contact Us!</a>
</div>