CSS Centering isnt possible

My Problem is that I cant get the menu in my Footer centered (http://prntscr.com/te8bzk) when I'm in the portrait mode (I'm working with media queries). position: absolute; + right: 50%; isn't working. But maybe I overlooked something because I'm still a beginner in HTML and CSS. Js fiddle link is https://jsfiddle.net/Cxtz11/mrz2L1dt/1/

.main-footer {
  border-color: white;
  border-radius: 0px;
  border-top-style: solid;
  border-width: thick;
  background;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: inherit;
}

.footer-nav {
  list-style: none;
  position: absolute;
  top: 20px;
  right: 50%;
}

.footer-nav li {
  float: left;
}

.footer-nav li+li {
  margin-left: 10px;
}

.Copyright {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 80px;
  color: #fff;
}

.Social {
  position: absolute;
  top: -20px;
  right: 50%;
  color: #fff;
}

<footer id="footer" class="main-footer clearfix">
  <p class="Copyright clearfix">
    S &copy; 2020
  </p>
  <h1 class="Social clearfix">
    <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a>
  </h1>
  <ul class="footer-nav clearfix">
    <li><a href="/Impressum/Impressum.html">Impressum</a></li>
    <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li>
    <li><a href="/AGB/AGB.html">AGB</a></li>
  </ul>
</footer>

(You may have to adjust the "display window" in JSfiddle to portrait because I'm working with media queries and there are two versions of my site.

Solution

Well, your styling convention is not so good here and I strongly suggest rewriting your styles entirely for sake of maintainable code. But regards to your current style there is a simple fix that should help to make your menu center as expected.

So you have to make your footer-nav class like this:

.footer-nav {
  padding: 0;
  list-style: none;
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

You can't directly use display: flex; here alone because your ul element is extremely out of position, so you need to make sure to put your element inside your current box with right: 0 and left: 0 properties. Then you can use display: flex; and justify-content: center; as usual. Also due to the default ul element default padding for starting items, you need to set your padding to 0 as well.

Then your final code should be something like this:

.main-footer {
  border-color: white;
  border-radius: 0px;
  border-top-style: solid;
  border-width: thick;
  background;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: inherit;
}

.footer-nav {
  padding: 0;
  list-style: none;
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

.footer-nav li {
  float: left;
}

.footer-nav li+li {
  margin-left: 10px;
}

.Copyright {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 80px;
  color: #fff;
}

.Social {
  position: absolute;
  top: -20px;
  right: 50%;
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<footer id="footer" class="main-footer clearfix">
  <p class="Copyright clearfix">
    S &copy; 2020
  </p>
  <h1 class="Social clearfix">
    <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a>
  </h1>
  <ul class="footer-nav clearfix">
    <li><a href="/Impressum/Impressum.html">Impressum</a></li>
    <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li>
    <li><a href="/AGB/AGB.html">AGB</a></li>
  </ul>
</footer>

If in any case, you are looking for a slight refactor you can use the below version.

.main-footer {
  position: relative;
  border-color: white;
  border-radius: 0px;
  border-top-style: solid;
  border-width: thick;
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.Social {
  font-size: 2rem;
}

.Social .fab {
  color: #fff;
}

.footer-nav {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.footer-nav li+li {
  margin-left: 10px;
}

.Copyright {
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<footer id="footer" class="main-footer clearfix">
  <div class="Social clearfix">
    <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a>
  </div>
  <ul class="footer-nav">
    <li><a href="/Impressum/Impressum.html">Impressum</a></li>
    <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li>
    <li><a href="/AGB/AGB.html">AGB</a></li>
  </ul>
  <p class="Copyright clearfix">
    S &copy; 2020
  </p>
</footer>