Как исправить фон панели навигации?

Не могу понять почему так происходит посмотри скриншот Я новичок в HTML и CSS. Я пробовал немного возиться с прокладкой, но это мне не помогло.

/* Main website */

* {
  background-color: #232323;
  color: white;
}


/* Navigation bar */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background: #000f14;
}

<div id = "nav-placeholder">
  <nav class = "navbar">
    <div class = "navbar__container">
      <div class = "navbar__toggle" id = "mobile-menu">
        <span class = "bar"></span>
        <span class = "bar"></span>
        <span class = "bar"></span>
      </div>
      <ul>
        <li>
          <a href = "/index.html"></a><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
        </li>
        <li><a href = "index.html">Home</a></li>
        <li><a href = "services.html">Services</a></li>
        <li><a href = "contact.html">Contact</a></li>
        <li><a href = "about.html">About us</a></li>
      </ul>
    </div>
  </nav>
</div>

html css

12.02.2023 22:15

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете решить свою проблему с помощью display: flex. Для получения дополнительной информации о flex вы можете посетить веб-сайт.

Этот код будет центрирован на элементах панели навигации.

* {
    background-color: #232323;
    color: white;
  }


  /* Navigation bar */

  .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000f14;
    display: flex;
    align-items: center;
  }

  .navbar li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: #000f14;
  }

<div id = "nav-placeholder">
    <nav class = "navbar">
      <div class = "navbar__container">
        <div class = "navbar__toggle" id = "mobile-menu">
          <span class = "bar"></span>
          <span class = "bar"></span>
          <span class = "bar"></span>
        </div>
        <ul>
          <li>
            <a href = "/index.html"></a><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
          </li>
          <li><a href = "index.html">Home</a></li>
          <li><a href = "services.html">Services</a></li>
          <li><a href = "contact.html">Contact</a></li>
          <li><a href = "about.html">About us</a></li>
        </ul>
      </div>
    </nav>
  </div>

13.02.2023 01:09

Заголовок ##вы должны изучить flexbox

    /* Main website */

    * {
        background-color: #232323;
        color: white;
      }
      
      
      /* Navigation bar */
      
      .navbar ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #000f14;
      }
      ul{
        display: flex;
    justify-content: space-between;
    align-items: center;}
      
      .navbar li {
        float: left;
      }
      
      .navbar li a {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        background: #000f14;
      }

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href = "/nav.css">
</head>
<body>

    <div id = "nav-placeholder">
      <nav class = "navbar">
        <div class = "navbar__container">
          <div class = "navbar__toggle" id = "mobile-menu">
            <span class = "bar"></span>
            <span class = "bar"></span>
            <span class = "bar"></span>
          </div>
          <ul>
            <li>
              <a href = "/index.html"></a><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
            </li>
            <li><a href = "index.html">Home</a></li>
            <li><a href = "services.html">Services</a></li>
            <li><a href = "contact.html">Contact</a></li>
            <li><a href = "about.html">About us</a></li>
          </ul>
        </div>
      </nav>
    </div>
</body>
</html>

Логотип не соответствует другим пунктам меню.

— 15.02.2023 16:36

извините, у меня нет логотипа, поэтому он кажется не выровненным

— 18.02.2023 21:37

13.02.2023 01:41

Одна из ваших проблем заключается в том, что у вас есть опечатка:

<a href = "/index.html">  
    </a> 
      <img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>

У вас есть лишний закрывающий тег перед тегом IMG. Лучше всего использовать FLEX-BOX. Что-то вроде этого:

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* Main website */

      * {
        background-color: #232323;
        color: white;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #000f14;
      }

      .navbar ul {
        background: #000f14;
        list-style-type: none;
        align-self: flex-end;
      }

      .navbar li {
        display: inline-block;
      }

      .navbar li a {
        display: inline-block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        background: #000f14;
      }
    </style>
  </head>
  <body>
    <div id = "nav-placeholder">
      <nav class = "navbar">
        <div class = "logo">
          <a href = "/index.html">
            <img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"
          /></a>
          <div class = "navbar__toggle" id = "mobile-menu">
            <span class = "bar"></span>
            <span class = "bar"></span>
            <span class = "bar"></span>
          </div>
        </div>
        <ul>
          <li><a href = "index.html">Home</a></li>
          <li><a href = "services.html">Services</a></li>
          <li><a href = "contact.html">Contact</a></li>
          <li><a href = "about.html">About us</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>

13.02.2023 02:00