title: Header title paragraphs and misplaces itself
body: <p>Previously, when my header only had 3 titles, i had no wrapping issues, however after adding another title, that specific title misplaces itself on top of the actual header.</p>
  
  <p>Diagram of desired result: <a href="https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png" rel="nofollow">https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png</a></p>
  
  <p>Codepen: <a href="https://codepen.io/valik140795/pen/qadXOo" rel="nofollow">https://codepen.io/valik140795/pen/qadXOo</a></p>
  
  <p>I believe the issue is coming from a dropdown button positioning(if not css), yet I am unable to specifically locate the issue.</p>
  
  <p>Code of the button of the title that relocates itself:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="body"&gt;
  &lt;div class="block_header"&gt;
    &lt;div class="lang"&gt;&lt;a href="updatethislinkforrussianversion"&gt;RU&lt;/a&gt; | &lt;a href="updatethislinkforenglishversion"&gt;ENG&lt;/a&gt;&lt;/div&gt;
    &lt;a href="index.html"&gt;&lt;img src="pictures/logo.png" class="logo" width="220px;" /&gt;&lt;/a&gt;
  
  
    &lt;ul&gt;
      &lt;style&gt;
        .dropbtn {
            background-color: #282828;
            color: #AA9568;
            padding: 0px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
  
        .dropbtn:hover, .dropbtn:focus {
            background-color: #282828;
        }
  
  
        .dropdown {
            position: relative;
          z-index: 999;
            display: inline-block;
        }
  
        .dropdown-content {
            display: none;
            position: fixed;
          z-index: 999;
            background-color: #282828;
            min-width: 180px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
  
        .dropdown-content a {
            color: #AA9568;
            padding: 3px 5px;
            text-decoration: none;
            display: block;
        }
  
        .dropdown a:hover {background-color: #282828}
  
        .show {display:block;}
      &lt;/style&gt;
  
      &lt;div class="dropdown"&gt;
        &lt;button onclick="myFunction()" class="dropbtn"&gt;&lt;a href=#fab&gt;ФАБРИКИ&lt;/a&gt;&lt;/button&gt;
        &lt;div id="myDropdown" class="dropdown-content"&gt;
          &lt;a href="#nobilis"&gt;Nobilis&lt;/a&gt;
          &lt;a href="#colordeseda"&gt;Color de Seda&lt;/a&gt;
          &lt;a href="#eugenio"&gt;Eugenio Colombo&lt;/a&gt;
          &lt;a href="#libra"&gt;Libra&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
        /* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }
  
        function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            div = document.getElementById("myDropdown");
            a = div.getElementsByTagName("a");
            for (i = 0; i &lt; a.length; i++) {
                if (a[i].innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                    a[i].style.display = "";
                } else {
                    a[i].style.display = "none";
                }
            }
        }
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>