How to Have Perfectly Centered Navigation Bar with Equally Wide Links

How can I have perfectly centered navigation bar with equally wide links?

Firstly, your HTML is invalid, ul can only have li as direct children...but we can use a nav element instead.

Method 1: Table Layout

.center-links {  display: table;  table-layout: fixed;  width: 100%;  text-align: center;}.center-links a {  display: table-cell;  border: 1px solid grey;}

<div class="container">  <nav class="center-links">    <a href="" class="content">Home</a>    <a href="/about" class="content">About</a>    <a href="/projects" class="content">Projects</a>    <a href="/recruit" class="content">recruting</a>    <a href="/help" class="content">Help</a>  </nav></div>

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>

CSS Navbar - How to evenly space out elements

You need to give the Nav some width and then use flex box on the nav_links.
I removed all you'r padding anchor width and margin

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #b7b7b7;
  }
  
  body {
    background-color: black;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background-color: #332323;
  }
  
  .logo {
    cursor: pointer;
    color: white;
    font-size: large;
  }
   /** Give the nav a width */
  .nav1{
      width:20%;
  }
  /** Set the flex properties */
  .nav_links{
    display: flex;
    justify-content: space-between;
  }
  .nav_links a {
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    list-style-type: none;
  }
  
  .button {
    background-color: #302b2b;
    padding: 5px 10%;
    color: white;
  }

Equal Spacing in Navbar

Your site shows two links, but some thoughts:

#big ul{
    display:block;
}
#big li {
    display:block;
    width:25%;
    float:left;
    text-align:center;    
}
#big li a{
    display:inline-block;
}

Makes the li element 1/4th of the width of its parent ul, then centers each a element in those. Add your styles as you want it to look.

Horizontal menu with evenly spaced items, and dynamic clickable area (anchors)

Make an ul with a width of 100%. Make the widths of all of the li elements percentages as well (For 4 items, make each 25%, etc.). Instead of using a border property to separate the li elements, use box-shadow with the properties:

box-shadow: 0px 0px 1px #000000;

Centering Navigation around a centre logo image

You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz

Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)

<div class="nav-bar">

  <div class="sideNav leftNav">
    <div class="menu">
      MENU 1
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 2
    </div>
  </div>
  <div class="logo">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
  </div>
  <div class="sideNav rightNav">
    <div class="menu">
      MENU 3
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 4
    </div>
  </div>

</div>

Then apply the css. It can be improved but it can help you get started.

.nav-bar {
  background: pink;
  display: flex;
}

.sideNav {
  flex: 1 0 auto;
  background: red;
  display: flex;
}

.leftNav {
  justify-content: flex-end;
}

.rightNav {
  justify-content: flex-start;
}

.sideNav > div {
  margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}

Hope that helps. I loves flexbox.