Блог

Я пытаюсь исправить
ссылки в нижнем колонтитуле внизу веб-страницы.
Это похоже на то, что он продолжает вот так перемешиваться.
Он охватывает другие, и это мешает, и это действительно раздражает.
Все ссылки труднодоступны и их трудно увидеть, как мне это исправить?

Вот мой HTML и CSS. Я уже давно застрял на этом fir, может кто-нибудь помочь?

HTML:

 <footer>
    <div class="container">
        <div class="column">
            <ul class="footer-links">
                <li>
                    <a class="link-text" href="index.html" title="Home">
                        Home </a>
                </li>
                <li>
                    <a class="link-text" href="search.html" title="Search"> 
                        Search </a>
                </li>
                <li>
                    <a class="link-text" href="servers.html" title="Servers"> 
                        Servers </a>
                </li>
                <li>
                    <a class="link-text" href="https://discord.gg/" target="_blank">
                        Official Discord Server </a>
                </li>
                <li>
                    <a class="link-text" href="termsofservice.html" target="_blank">
                        Terms Of Service </a>
                </li>
                <li>
                    <a class="link-text" href="guidelines.html" target="_blank">
                        Guidelines </a>
                </li>
            </ul>
        </div>   
    </div>
    <div class="copyright"> 
        <p class="copyright-text">amp;copy; Copyright 2020 OnTop Servers</p>
        </div>
    </footer>
 

CSS:

 .copyright {
    position: absolute;
    bottom: 1%;
    right: 1%;
    font-size: 15px;
}

.copyright-text {
  color: white;
}

.footer-links {
  position: absolute;
  bottom: 5%;
}

.link-text {
  position: absolute;
  bottom: 10%;
  color: white;
  text-decoration: none;
}

.container {
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  left: 100%;
}

footer {
  position: absolute;
  bottom: 0%;
  height: 300px;
  width: 100%;
  color: #fff;
  background: #2c2c2c;
}

.welcome {
  margin-top: -2.5rem;
  width: 100%;
  height: 35.5rem;
  line-height: 1.8em;
  margin-bottom: .4em;
  padding: 0;
  font-family: Helvetica;
  font-weight: 600;
  font-size: 1.5em;
  color: #ffff;
  text-transform: uppercase;
}

.centered-text {
  position: relative;
  margin-left: 25%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}

.discord-logo {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  display: inline-block;
  padding: .6em 0;
  background: url(images/Discord-Wordmark-White.png) center no-repeat;
  background-size: contain;
  font-size: 1em;
}

.head {
  margin-bottom: .4em;
  padding: 0;
  line-height: 1.4;
  font-weight: 600;
  font-size: 2em;
}

.body {
  position: relative;
  margin-left: 24.5%;
  margin: 0 auto 1em;
  text-transform: inherit;
  opacity: 85%;
}

.search-box {
  position: absolute;
  top: 90%;
  left: 18%;
  background: #2c2c2c;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover > .search-txt{
  width: 260px;
  padding: 0 6px;
}

.search-btn {
  color: white;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.search-box:hover > .search-btn {
  background: white;
  color: black;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

.navbar-servers {
  color: white;
  float: right;
}

.title-right {
  position: absolute;
  right: 25%;
}

body {
  color: #e6e6e6;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

h1{
  position: absolute;
  left: 38%;
  top: 10%;
}

.last-modified {
  position: absolute;
  left: 40%;
  top: 15%;
}

.terms-of-service-align {
  position: absolute;
  left: 35%;
  top: 25%;
}
 

В зависимости от желаемой картинки измените отображение ваших списков на встроенное, что позволит отображать списки горизонтально