Форматирование не применяется CSS

Question

Форматирование не будет применено к моему нижнему колонтитулу. Я не уверен, в чем проблема. Я пытался изменить нижний колонтитул на .footer, но это тоже не работает. Текст в нижнем колонтитуле должен быть выровнен по центру, а цвет текста должен быть черным. Текст не по центру и синий, потому что это ссылка.

#footer {
  text-align: center;
  font-size: 16px;
  font-size-adjust: auto;
  font-weight: bold;
  color: black;
}

<div class="text-center center-block">
  <footer id="footer" class="container-fluid bg-4 text-center">
    <a href="/home/"> <img id="image" src="../images/Patriotonly.png" style="display:center" alt="Patriot Perspective" height="10%" width="10%"> </a>
    <span style="color: #161862;">Patriot</span><span style="color: #ED092C;"> Perspective</span>
    <div class="social_link">
      <ul class="sociallink_nav">
        <li><a href="https://www.facebook.com/patriotperspective/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/ThePatriotPers1"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com/channel/UColyEbi9qxlHLT0kpv46Tew"><i class="fa fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/patriotperspective/"><i class="fa fa-instagram"></i></a></li>
      </ul>
      <br>
      <br>
      <ul><a href="privacypolicy.html" id="bottom-text">Privacy Policy</a>
        <a href="privacypolicy.html" id="bottom-text">Terms of Service</a>
        <a href="privacypolicy.html" id="bottom-text">Advertising</a>
        <a href="privacypolicy.html" id="bottom-text">Contact</a>
      </ul>
      <p class="copyright">Copyright &copy; 2018 <a href="index.html">Patriot Perspective</a></p>
    </div>
  </footer>
  <hr>
</div>

Answer 1

Вам не нужно включать "id=footer". footer является нативным тегом в HTML5, вы можете включить его в свой CSS без хештега. На заметке вашего bottom_text лучше включить это как класс. Идентификаторы действительно предназначены для использования один раз, тогда как классы предназначены для многократного использования. Вы не включили css для класса bottom_text, но вы можете изменить # на точку.

Включите li теги, чтобы правильно перечислить элементы в списке. Вы можете удалить подчеркивание / изменить внешний вид ссылки, включив атрибут text-decoration.

footer {
  text-align: center;
  font-size: 16px;
  font-size-adjust: auto;
  font-weight: bold;
  color: black;
}

footer a {
  color: black;
  text-decoration: none;
}

ul li {
  list-style-type: none;
  display: inline;
}

<div class="text-center center-block">
  <footer class="container-fluid bg-4 text-center">
    <a href="/home/"> <img id="image" src="../images/Patriotonly.png" style="display:center" alt="Patriot Perspective" height="10%" width="10%"> </a>
    <span style="color: #161862;">Patriot</span><span style="color: #ED092C;"> Perspective</span>
    <div class="social_link">
      <ul class="sociallink_nav">
        <li><a href="https://www.facebook.com/patriotperspective/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/ThePatriotPers1"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com/channel/UColyEbi9qxlHLT0kpv46Tew"><i class="fa fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/patriotperspective/"><i class="fa fa-instagram"></i></a></li>
      </ul>
      <br>
      <br>
      <ul>
        <li><a href="privacypolicy.html" class="bottom-text">Privacy Policy</a></li>
        <li><a href="privacypolicy.html" class="bottom-text">Terms of Service</a></li>
          <li><a href="privacypolicy.html" class="bottom-text">Advertising</a></li>
          <li><a href="privacypolicy.html" class="bottom-text">Contact</a></li>
      </ul>
      <p class="copyright">Copyright &copy; 2018 <a href="index.html">Patriot Perspective</a></p>
    </div>
  </footer>
  <hr>
</div>