HTML/CSS - Phantom Margin which I can not find
<p>I'm creating a menu bar on my website. My issue is that there is a small margin at the side of one of my menu items. (I have highlighted this by adding background-color: black; to the container.) I am using safari.</p>

<p><a href="https://i.stack.imgur.com/QAA5l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QAA5l.png" alt="margin issue"></a></p>

<p>The CSS:</p>

<pre><code>.testMenuOption{
  width: calc(100%  /3);
  height: 100%;
  float: left;
  margin:auto;
  background-color: white;
  display: table;
}
</code></pre>

<p>Can somebody tell me what my issue is? I have tried removing the text and it is not the issue.</p>