What is causing the gap between my buttons?

Question

What is creating the green gap between the buttons on my website?

There are five buttons which are supposed to align inside of the green div. At the moment they all sit inside of the div but they should be able to go side by side without taking up an extra row. Screenshot of website

As far as I can tell there is no padding or border which might be causing it. Here is my HTML

.NavLeft {
  background-color: #E3CAA1;
  display: inline-block;
  cursor: pointer;
  color: #cc9933;
  font-family: Arial;
  font-size: 28px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
  margin-left: 0px;
  height: auto;
  width: 200px;
  position: relative;
  border-radius: 0px 0px 0px 13px;
}

.NavLeft:hover {
  background-color: #FCEACB;
}

.NavLeft:active {
  position: relative;
  top: 1px;
}

.NavCentre {
  background-color: #E3CAA1;
  display: inline-block;
  cursor: pointer;
  color: #cc9933;
  font-family: Arial;
  font-size: 28px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
  margin-left: auto;
  height: auto;
  width: 200px;
  position: relative;
}

.NavCentre:hover {
  background-color: #FCEACB;
}

.NavCentre:active {
  position: relative;
  top: 1px;
}

.NavRight {
  background-color: #E3CAA1;
  display: inline-block;
  cursor: pointer;
  color: #cc9933;
  font-family: Arial;
  font-size: 28px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
  margin-right: 0px;
  height: auto;
  width: 200px;
  position: relative;
  border-radius: 0px 0px 13px 0px;
}

.NavRight:hover {
  background-color: #FCEACB;
}

.NavRight:active {
  position: relative;
  top: 1px;
}

<a href="Index.html" class="NavLeft">Home</a>
<a href="Index.html" class="NavCentre">Home</a>
<a href="Index.html" class="NavCentre">Home</a>
<a href="Index.html" class="NavCentre">Home</a>
<a href="Index.html" class="NavRight">Home</a>