How to center navbar using CSS and HTML

I have created a navbar but I cannot figure out how to center it on my webpage.

.row {
  max-width: 1140px;
  background-color: green;
  margin: auto;
  width: 80%;
}

body {
  margin: 0;
}


/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  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;
}

<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>

Solution

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>