I have a problem concerning my navigation bar...

1. I want to position it to the center and its wont do it.
2. I want to to fill from the left to the right.

I tried to : text-align: center in .navbar a text-align: center in navbar.

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
}

.navbar a {
  color: white;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: block;
  float: left;
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderborard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I documented in the CSS source what I've done.

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderborard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This seems to work using

justify-content: center;

on a container

.container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}
.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

   

 <div class="container">
      <div class="navbar">
        <a href="../index.html">Home</a>
        <a href="Guides.html">Guides</a>
        <a href="#">Clips</a>
        <a href="#">Leaderborard</a>
        <a href="Support the server.html">Support the server</a>
        <a href="Help.html">Help</a>
      </div>
    </div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>