title: How can I add text to a div without affecting the surrounding text?
body: <p>I'm trying to add the burger button icon to my header. Before I add it, my <code>Example Title</code> is centred. After I add the icon, <code>Example Title</code> is pushed a little to the right. </p>
  
  <p>I want <code>Example Title</code> to remain centred even with the icon in place.</p>
  
  <p>I have put </p>
  
  <pre><code>* {
  margin: 0;
  padding: 0;
  }
  </code></pre>
  
  <p>In my style sheet, but it doesn't help in this case.</p>
  
  <p>Here is a visual example of my problem. </p>
  
  <p>Before icon
  <a href="https://i.stack.imgur.com/LGlC6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LGlC6.png" alt="enter image description here"></a></p>
  
  <p>After Icon 
  <a href="https://i.stack.imgur.com/Gx1Li.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gx1Li.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin: 0;
   padding: 0;
  }
  
  body {
   text-align: center;
  }
  
  #navbut {
   cursor: pointer;
   font-size: 20px;
  }
  
  #title {
   width: 100%;
   background-color: #373737;
   color: #f4f4f4;
   padding: 5px 0;
   display: table;
   text-align: center;
   font-size: 4em;
  }
  
  #title p {
   display: table-cell;
   vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="title"&gt;
  &lt;span id="navbut"&gt;&amp;#9776;&lt;/span&gt;
  &lt;p&gt;Example Title&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>