After numerous attempts, I still can't seem to resolve the issue of my website appearing differently on Firefox and Edge browsers; the container seems to be misaligned and shifted. I have spent hours scouring the web for a solution with no luck. My ultimate goal is to adjust the website content or CSS based on the specific browser being used. You can access the full CSS and additional details on CodePen.
Demo: https://codepen.io/anon/pen/wJdGLQ
Here is a snippet of the HTML code:
<div id="jobs-popup">
<img id="x-icon1" src="web%20x%20icon%20white.png">
<div class="jobs-content">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23505653534c5157634e42444a40574c56404b4253530d404c4e">[email protected]</a>" target="_top" class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0a38580809f8284b09d91979993849f859398918080de939f9d">[email protected]</a></a>
</div>
</div>
<!--End Section for Jobs Popup -->
<!-- Section for contact popup -->
<div id="contact-popup">
<img id="x-icon2" src="web%20x%20icon%20white.png">
<div id="contact-content">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed9e989d9d829f99ad808c8a848e9982988e858c9d9dc38e8280">[email protected]</a>" target="_top" class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eebd9b9e9e819c9aae838f89878d9a819b8d868f9e9ec08d8183">[email protected]</a></a>
</div>
</div>
<!-- End Section for Contact Popup -->
<!-- Section for Press popup -->
<div id="press-popup">
<img id="x-icon3" src="web%20x%20icon%20white.png">
<div id="press-content">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5e585d5d425f596d404c4a444e5942584e454c5d5d034e4240">[email protected]</a>" target="_top" class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eddfbfefee1fcfacee3efe9e7edfae1fbede6effefea0ede1e3">[email protected]</a></a>
</div>
</div>
<!-- End section Press -->
<!-- Section for legal popup -->
<div id="legal-popup">
<img id="x-icon4" src="web%20x%20icon%20white.png">
<div id="legal-content">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3a0a6a3a3bca1a793beb2b4bab0a7bca6b0bb')">[email protected]</a>" target="_top" class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="edbe989d9d829f99ad808c8a848e9982988e858c9d9dc38e8280">[email protected]</a></a>
</div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
<img id="x-icon5" src="web%20x%20icon%20white.png">
<div id="support-content">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285b5d5858475a5c6845494f414b5c475d4b40495858064b4745">[email protected]</a>" target="_top" class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3f0d6d3d3ccd1d7e3cec2c4cac0d7ccd6c0cbc2d3d38dc0ccce">[email protected]</a></a>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-bar">
<ul>
<li><a class="nav-list" href="#" id="jobs" id="job-under">Jobs</a></li>
<li><a class="nav-list" href="#" id="contact" id="contact-under">Contact</a></li>
<li><a class="nav-list" href="#" id="press" id="press-under">Press</a></li>
<li><a class="nav-list" href="#" id="legal" id="legal-under">Legal</a></li>
<li><a class="nav-list" href="#" id="support" id="support-under">Support</a></li>
</ul>
</div>
</div>
<div id="container">
<ul id="menu">
</ul>
<h1 id="name">Magic Touch</h1>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>