How to Center a Navigation Bar with CSS or HTML

How to center a navigation bar with CSS or HTML?

#nav ul {
    display: inline-block;
    list-style-type: none;
}

It should work, I tested it in your site.

Sample Image

How to align navbar to center with css

One way would be to set the display of #nav ul to inline-block. Then add text-align: center to the parent element in order to center the child ul:

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    text-align: center;
}
#nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

Alternatively, you could also set the display of the parent element, #nav to flex, and then add justify-content: center to center the child element horizontally.

Example Here

#nav {
    position: absolute;
    left: 0px;
    height: 40px;
    background-color: #2C64B4;
    width: 100%;
    display: flex;
    justify-content: center;
}

How to center navbar using CSS and HTML

You'll need to do 2 things
1. Change text alignment to <navbar>

 navbar{
      text-align: center;
    }

This will be so the menu is center in your navbar

2.Remove float and add display

.topnav a {
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            display: inline-block;
            text-decoration: none;
            font-size: 17px;
        }

We need to remove the float so the they can align, as you are forcing them left.
And by adding the display: inline-block the <a> tags will respect your assigned padding.

Remember <a> tags are inline elments by default, and you can't asign top and bottom values.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

.row {    max-width: 1140px;    background-color: green;    margin: auto;    width: 80%;}
body {    margin: 0;}
/* Add a black background color to the top navigation */navbar{  text-align: center;}.topnav {    background-color: #333;    overflow: hidden;}
 
/* Style the links inside the navigation bar */.topnav a {    color: #f2f2f2;    text-align: center;    padding: 14px 16px;    display: inline-block;    text-decoration: none;    font-size: 17px;}
/* Change the color of links on hover */.topnav a:hover {    background-color: #ddd;    color: black;}
/* Add a color to the active/current link */.topnav a.active {    background-color: #4CAF50;    color: white;}

<!DOCTYPE html><html>
<head>     <link rel="stylesheet" href="styles.css"></head>
<body>
    <header>        <navbar>            <div class="topnav">                <a class="active" href="#home">Home</a>                <a href="#news">News</a>                <a href="#contact">Contact</a>                <a href="#about">About</a>            </div>        </navbar>    </header>
    <div class="row">        <p>Test text</p>    </div>    </body></html>

how to center navigation bar and one item in right

You were very close, but forgot to set the position of the .right element to absolute. right: 0 won't do anything to a element with default (aka static) positioning. https://developer.mozilla.org/en-US/docs/Web/CSS/position

* {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  height: 35px;
  width: 100vw;
  z-index: 2;
  background-color: rgba(0, 0, 0, 1);
}

.nav {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  text-transform: uppercase;
}

li {
  list-style: none;
}

.center {
  text-align: center;
  display: flex;
}

.right {
  position: absolute;
  right: 0;
  text-align: right;
}

.nav .text1 {
  color: #f2f2f2;
  padding: 15px 35px;
  text-decoration: none;
  font-size: 12px;
}

<header>
  <div class="nav">
    <div class="center">
      <li><a class="text1" href="#">one</a></li>
      <li><a class="text1" href="#">two</a></li>
      <li><a class="text1" href="#">tree</a></li>
    </div>
    <div class="right">
      <li><a class="text1" href="#">four</a></li>
    </div>
  </div>
</header>

How to align navbar to center

apply this css rule to elemnts

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

HTML & CSS Center navigation bar

Using flexbox will do exactly that...

adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.

You will need to prefix those styles to run on all browsers FYI.

.navigation nav {  display: flex;  justify-content: center;    background-color: #333333;}ul {  display: flex;  flex-flow: row wrap;    list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  border-radius: 5px;}li a {  display: block;  color: white;  text-align: center;  padding: 16px;  text-decoration: none;  border-bottom: none;}li a:hover {  background-color: #111111}

<header class="navigation">  <nav>    <ul>      <li><a class="active" href="#home">Home</a>      </li>      <li><a href="#download">Download</a>      </li>      <li><a href="#contact">Contact</a>      </li>      <!-- Maybe the navigation bar gets more buttons in the future. -->    </ul>  </nav>
  <h1>Test Test Test</h1></header>

How do I center the navigation bar buttons?

Have you tried setting display: flex; on your <ul>? Then you should be able to add justify-content: center;.

How to center elements of a navbar

This answer assumes you want to center your links but not your logo or other contents of your <header>.

You have the <header> flexbox set to be justify-content: space-between. That's great; it means you just have to add one more child element to it. Then the first element (logo) will be at left, the <nav> links will be at center, and the third element will be at right. You can add an empty <div></div> for now; you'll want to put all your right-side items within this element.

This won't actually provide perfect centering, since the widths of the three child elements vary. You can fix that with something like this (depending on actual layout needs):

.topbar > :first-child,
.topbar > :last-child {
  flex-basis: 25%;
}

You have a few unnecessary bits left in your CSS from experimenting, mostly copies of text-align: center. You'll need to remove some of those to prevent the logo from being centered within its area, for example.

How to Center a Navigation Bar with CSS or HTML