造成我的按钮之间差距的原因是什么？

Question

什么在我的网站上创建按钮之间的绿色差距？

有五个按钮可以在绿色div内部对齐。目前他们都坐在div内，但他们应该能够并排而不需要额外的一排。 Screenshot of website

据我所知，没有可能导致它的填充或边框。 这是我的HTML

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;