title: Adding padding / whitespace after some text
body: <p>I am attempting to customise the menu in a Wordpress.com site (belongs to a client).</p>
  
  <p>The URL is: <a href="https://chainecharlotteorg.wordpress.com/" rel="nofollow noreferrer">https://chainecharlotteorg.wordpress.com/</a></p>
  
  <p>It's the main nav bar along the top of a site.</p>
  
  <p>I can add a <strong>CSS class</strong> to the menu item. Using that class I have changed the background-color. But I want the background to have space at least before and after the manu item text. Padding has no effect. </p>
  
  <p>I was able to get space before the text by defining the <code>width</code> to something wider than the text. This had the effect of creating space in front of the text. As shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/MCB08.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCB08.png" alt="Example"></a></p>
  
  <p>But I have been unable to find a way to set some space after "Donate" so that the blue background extends beyond it. I would have thought padding would do this, but in this case it does not.</p>
  
  <p>From the front end, here's the code involved:</p>
  
  <pre><code>&lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
  &lt;div class="menu-nav-menu-container"&gt;
  &lt;ul id="primary-menu" class="menu nav-menu" aria-expanded="false"&gt;
  &lt;li id="menu-item-157" class="donate menu-item menu-item-type-post_type menu-item-object-page menu-item-157"&gt;
  &lt;a href="https://chainecharlotteorg.wordpress.com/donate/"&gt;Donate&lt;/a&gt;
  &lt;/li&gt;
  &lt;li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"&gt;
  &lt;li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"&gt;
  &lt;li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"&gt;
  &lt;li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"&gt;
  &lt;li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"&gt;
  &lt;li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"&gt;
  &lt;li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>With the following (from that) being the code specific to the "Donate" menu item:</p>
  
  <pre><code>&lt;li id="menu-item-157" class="donate menu-item menu-item-type-post_type menu-item-object-page menu-item-157"&gt;
  &lt;a href="https://chainecharlotteorg.wordpress.com/donate/"&gt;Donate&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Does anyone have any suggestions?</p>