Вопрос Подвал с текстом HTML | CSS

[Vergehen]

  <footer class="site-footer">
    <div class="wrapper">
        <div class="interestLinks">
          <h4>Полезные ссылки:</h4>
          <div class="interestLinkscontainer">
          <ul>
            <a href="#">Главная</a>
            <a href="#">О компании</a>
            <a href="#">Услуги</a>
            <a href="#">Наши клиенты</a>
            <a href="#">Выполненные проекты</a>
            <a href="#">Рекомендации клиентов</a>
            <a href="#">Вакансии</a>
            <a href="#">Контакты</a>
          </ul>
          </div>
        </div>
        <div class="Contacts">
          <h4>Контакты:</h4>
          <div class="Contactscontainer">
            <p><strong>Адрес : </strong>д.182, офис 11</p>
            <p><strong>Адрес : </strong> ул. , оф. 422</p>
            <p><strong>Адрес : </strong>ул. , д. 26</p>
            <p><strong>Телефоны: </strong></p>
            <p><u>0000 000-000</u></p>
            <p><strong>Пн-Пт: </strong>с 9:00 до 18:00</p>
          </div>
        </div>
    </div>
  </footer>

.footer::before {
    content: "";
}

.site-footer {
    background-color: #3b3b3b;
    display: block;
    margin: 1 auto;
    min-width: 100px;
    height: 0;
    position: relative;
    z-index: 1;
}

.site-footer ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.wrapper {
    background: #474747;
    margin: 1px auto;
}

.site-footer h4 {
    color: rgb(255, 255, 255);
    font-size: 13px;
    text-transform: none;
    margin-top: 10px;
    letter-spacing: 0px;
    float: left;
}

.site-footer a {
    color: #737373;
    float: left;
    text-decoration: underline;
}

.site-footer a {
    color: #737373;
    float: left;
    text-decoration: underline;
}

.site-footer a:hover {
    color: #737373;
    text-decoration: none;
}

.interestLinks {
    clear: both;
    position: relative;
    margin-top: 20px;
    box-sizing: border-box;
}

.interestLinkscontainer {
    top: 50px;
    position: absolute;
    list-style: none;
    clear: left;
    display: list-item;
    font-size: small;
    margin: 0 0 15px;
    font-weight: 400;
    line-height: 1.4;
}

.interestLinkscontainer a {
    list-style: none;
    position: relative;
    padding: 3px 0px 2px 250px;
    clear: left;
    display: inline-block;
}

.interestLinks h4 {
    list-style: none;
    position: relative;
    padding: 5px 0px 2px 250px;
    clear: left;
    display: inline-block;
}

.Contacts {
    clear: both;
    position: relative;
    top: -20px;
    right: -100px;
}

.Contactscontainer{
    font-size: small;
}

.Contactscontainer p {
    list-style: none;
    position: relative;
    padding: 3px 0px 2px 500px;
    clear: both;
    display: list-item;
    font-size: small;
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.4;
}

.Contacts h4 {
    list-style: none;
    position: relative;
    padding: 5px 0px 2px 500px;
    clear: left;
}

Вопрос, почему у Полезных ссылок, бокс слева ? По возможности, помогите починить.
Спасибо.

EDIT:
Я просто добавил поверх интересных ссылок, z-index: 1;