title: Html text position is not at the same place when I shrink my window size
body: <p>When I shrink the window of my browser,the text gather together and it is all messed up.
  Is there any code I can use to prevent this happens?I want them to stay in their own position no matter what size the window is.</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>.fixedmenu {
      overflow: hidden;
      background-color:rgb(153,0,51);
      position: fixed; 
      top: 0; 
      width: 100%; 
      font-size:2em;
      left:0;
      position:relative;
      font-family:"Courier New", Courier, monospace;    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixedmenu"&gt;
  
  &lt;div style="float: left;color:white;padding:0.5% 0% 0.5% 3%;"&gt;
      || YggDrasil ||
  &lt;/div&gt;
  
  &lt;div style="float: right;color:white;padding:0.5% 3% 0.5% 0%;"&gt;
      || Login ||
  &lt;/div&gt;
  
  &lt;div style="margin:0 auto; width:30%;color:white;padding:0.5% 0% 0.5% 0%;"&gt;
      Welcome to the page of leading to fashion. 
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/4ul1Z.png" rel="nofollow noreferrer">I don't want it to look like this</a>    </p>