How to add space between menu elements (in wordpress)?

Question

I am working in wordpress and I have this menu with 4 menu items. The problem is that they are touching each other and there is 0 space between which makes it ugly in my opinion.

Now this problem only occurs in wordpress. So I have to find a solution how to put some space between.

Maybe you guys know a solution without having to install something on WP.

(the codes in the body is exactly as in my wordpress to demonstrate how it looks like. You can enter it and that will put some space between, but unfortunately that doesn't work in wordpress.)

<style>
  .smallmenu {
    margin: 0 auto;
    max-width: 436px;
    width: 100%;
  }

  .Capital {
    margin: 0px 0 -5px 0;
    line-height: 63px;
    font-size: 60px;
    font-weight: ligter;
  }

  .smalltext {
    text-align: center;
    margin-top: 0px !important;
    font-weight: 100px;
    font-size: 14px;
  }

  .smalltextpub {
    text-align: center;
    margin-top: 0px !important;
    font-weight: 100px;
    font-size: 14px;
    margin-left: -5px;
  }

  .cornermenu {
    display: inline-block;
    margin: auto;
    border-radius: 25px;
    background: #769DBD;
    padding: 20px;
    width: 100px;
    height: 100px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    padding-top: 10px;
    text-decoration: none;
  }

  #hoverr:hover {
    border-radius: 25px;
    background: #464646;
    padding: 20px;
    width: 100px;
    height: 100px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    padding-top: 10px;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }
</style>
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span>
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span>
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span>
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span>
<span class="smalltextpub">Publications</span></a></div>

Answer 1

Just set a fixed margin on .cornermenu. Something like margin: 2px

JSFiddle link

 .cornermenu {
    ...
    margin: 2px;
    ...
  }