Проблема при создании футера сайта HTML CSS

14 февраля 2021, 08:20

Вроде правильно пишу код, по гайду, а футер выглядит не так как надо. И еще не могу номер телефона по центру сделать (на номер внимания не обращайте, это тест.)

 <!DOCTYPE html>
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="keywords" content="test, site, website" />
        <meta name="description" content="Сайт отечественных автомобилей" />
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="image/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
        <title>Русское Авто</title>
        </head>
        <body>
        <div id="page wrap">
        <header>
        <a href="index.html" title="Главная" id="logo">
        Russian-Auto</a>
        <span class="contact">
        <a href="about.html" title="Информация о нас">О нас</a></span>
        <input type="search"class="field" placeholder="Поиск"/>
        <span class="right"><span class="contact">
        <a href="reg.html" title="Зарегестрироваться">Регистрация</a></span><span class="contact">
        <a href="auth.html" title="Войти">Вход</a></span></span>
        </header>
        <div class="clear"><br /></div>
        <center>
            <div id="menu">Разделы<hr /></div> 
            <div id="menuHrefs">
              <a href="about.html">О нас</a>
              <a href="feedback.html">Связь с нами</a>
              <a href="auth.html">Вход</a>
              <a href="reg.html">Регистрация</a>
            </div>
        </center>
        <div id="wrapper">
            <div id="articles">
            <div id="about_us">
            </div>
        </div>  
        </div>
        <footer>
          <span class="left">Все права защищены &copy; 2019</span>
          <span class="right">Соц. Кнопки<img src="image/VK.png" alt="VK" title="VK" /></span>
          <span class="center">Телефон:8-800-555-35-35</span>
        </footer>
        </body>
        </html>

            footer {
          position: absolute;
          bottom: 0;
          width: 98%;
          height: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        footer img {
          width: 1.5%;
          float: right;
          margin-left: 10px;
        }

        span.right {
          text-align: right;
        }

Answer 1

Просто поменять местами "spanы" с классом "center" и "right" местами :)