Header - How to stop hidden links from taking up (some) space. Some weird things going on

Site needs to be bilingual.  English pages are under */en/* and Greek pages under */el/*

For that purpose, I injected the code below to the global header so to hide from the header when English pages are active the links to the Greek pages and vice versa.  Works perfect, as evidenced by /en/policy and /el/policy pages which are the only set up as bilingual at the moment.

<script>
window.addEventListener('DOMContentLoaded', function() {
  var currentURL = window.location.href;
  if (currentURL.includes("/en/") || currentURL.includes("/el/")) {
    var englishPages = document.querySelectorAll('a[href*="/en/"]');
    var greekPages = document.querySelectorAll('a[href*="/el/"]');
    var header = document.querySelector('.Header.Header--bottom');

    // Hide the links immediately
    for (var i = 0; i < englishPages.length; i++) {
      englishPages[i].style.display = "none";
    }
    for (var i = 0; i < greekPages.length; i++) {
      greekPages[i].style.display = "none";
    }
    if (currentURL.includes("/en/")) {
      // Display English links only
      for (var i = 0; i < englishPages.length; i++) {
        englishPages[i].style.display = "";
      }
      // Hide Greek links completely
      for (var i = 0; i < greekPages.length; i++) {
        greekPages[i].style.display = "none";
      }
    } else {
      // Display Greek links only
      for (var i = 0; i < greekPages.length; i++) {
        greekPages[i].style.display = "";
      }
      // Hide English links completely
      for (var i = 0; i < englishPages.length; i++) {
        englishPages[i].style.display = "none";
      }
    }
  }
});
</script>

The problem however is this. Although the links of the non relevant language pages are hidden perfectly and promptly , apparently they take up a bit of a space. The wrapped links, last two, i,.e. "Privacy Policy" and "Contact us", are normally and should be to the far right of the 2nd row as seen in the picture.   

Now as you can see in the webpage, they are slightly more to the left because I added in the Main Navigation Pages the /el/policy page.  If I add another /el/page they will go even more to the left.  Add enough, they will end up to the far left.   What gives? And any ideas. Tried few things but nothing works.

Example of failed attempt to eliminated that space taken from hidden links

 // Set width and height of hidden links to zero

for (var i = 0; i < englishPages.length; i++) {

  englishPages[i].style.width = "0";

  englishPages[i].style.height = "0";

}

for (var i = 0; i < greekPages.length; i++) {

  greekPages[i].style.width = "0";

  greekPages[i].style.height = "0";

}

// Set CSS rule to make sure wrapped text is to the far right of the page

var style = document.createElement('style');

style.innerHTML = `

  .Header-nav--primary {

    justify-content: flex-end;

  }

`;

document.head.appendChild(style);

</script>

Help is VERY much appreciated. 

SOLVED: 

8 Hours I was trying to solve it and as soon as I posted the solution came up.  Posting final code with all corrections here for posterity.  2nd row is now aligned right, all links are promptly hidden depending the language and also added  a switch to completely disregard any pages than their URL does not contain an  /en/ (english) or /el/ (Greek) address

window.addEventListener('DOMContentLoaded', function() {
  var currentURL = window.location.href;
  var englishPages = document.querySelectorAll('a[href*="/en/"]');
  var greekPages = document.querySelectorAll('a[href*="/el/"]');
  var header = document.querySelector('.Header.Header--bottom');

  // Hide the links and their parent elements completely
  for (var i = 0; i < englishPages.length; i++) {
    englishPages[i].parentNode.style.display = "none";
  }
  for (var i = 0; i < greekPages.length; i++) {
    greekPages[i].parentNode.style.display = "none";
  }

  if (currentURL.includes("/en/")) {
    // Display English links only
    for (var i = 0; i < englishPages.length; i++) {
      englishPages[i].parentNode.style.display = "block";
    }
    // Hide Greek links and their parent elements completely
    for (var i = 0; i < greekPages.length; i++) {
      greekPages[i].parentNode.style.display = "none";
    }
  } else if (currentURL.includes("/el/")) {
    // Display Greek links only
    for (var i = 0; i < greekPages.length; i++) {
      greekPages[i].parentNode.style.display = "block";
    }
    // Hide English links and their parent elements completely
    for (var i = 0; i < englishPages.length; i++) {
      englishPages[i].parentNode.style.display = "none";
    }
  } else {
    // Display all links
    for (var i = 0; i < englishPages.length; i++) {
      englishPages[i].parentNode.style.display = "block";
    }
    for (var i = 0; i < greekPages.length; i++) {
      greekPages[i].parentNode.style.display = "block";
    }
  }

  // Align second row of links to the right
  var navItems = header.querySelectorAll('.Header-nav > .Header-nav-item');
  var secondRowItems = [];
  for (var i = 0; i < navItems.length; i++) {
    if (navItems[i].offsetTop > navItems[0].offsetTop) {
      secondRowItems.push(navItems[i]);
    }
  }
  var offsetRight = 0;
  for (var i = 0; i < secondRowItems.length; i++) {
    offsetRight += secondRowItems[i].offsetWidth;
  }
  header.querySelector('.Header-nav:last-child').style.marginRight = offsetRight + 'px';
});