How can I add text to a div without affecting the surrounding text?
<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>