Как сделать пробел между логотипом и панелью навигации?

Хочу сделать шапку как на фото:Как сделать пробел между логотипом и панелью навигации?

Теперь это выглядит так: заголовок

Вот html-код:

<header class = "header">
        
        <div class = "container">
        <nav class = "navBar">
            
            <div class = "navBar-wrapper">
            <div class = "img-logo">
            <img src = "./img/logo.jpg" alt = "" srcset = ""></div>
            
            
            <div class = "home">Home</div>
            <div class = "aboutUs">About us</div>
            <div class = "findSpace">Find space</div>
            <div class = "share-space">Share space</div>
            <div class = "promoteSpace">Promote space</div>

            </div>
        
        </nav>
        </div>
    
    </header>

А вот css:
Есть ли способ добавить пробел между логотипом и переместить навигацию влево?

body{
    font-family:"Poppins",sans-serif;
    font-weight: 400;
}

.container{
   
    max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
}

.header{
    height: 112px;
    width: 100%;
    background: #fff;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navBar-wrapper div{
    font-size: 16px;
    line-height: 24px;
    color: #323232;
    margin-top: 28px;
}

.home{
    font-weight: 700 !important;
    color:#F78434 !important;
}


Как сделать пробел между логотипом и навигацией?

Пытался получить доступ ко второму ребенку с помощью nth-child(2), но это не сработало.

Фрагмент кода: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html

Пожалуйста, создайте фрагмент, чтобы мы могли поиграть с ним.

Lajos Arpad 02.04.2022 14:05

Привет, Лора! Есть много разных способов сделать это довольно просто, а также сделать ваше главное меню намного проще. Вместо того, чтобы помещать каждый элемент меню в div, посмотрите, что вы можете найти, чтобы поместить все меню в список <ul>, а затем выровнять этот ul по правой стороне (что должно предоставить то, что вам нужно).

Cutey from Cute Code 02.04.2022 14:08
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
45
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете сделать это, просто применив margin-right: auto; к img-logo-контейнеру.

Обратите внимание, что это повлияет на родительские контейнеры justify-content: space-between;, поэтому я бы предложил применить другое свойство CSS, например gap: 10px;, к navBar-wrapper.

В качестве альтернативы вы можете поместить все ссылки на панели навигации в другой контейнер для лучшего контроля на панели навигации.

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.img-logo img {
  max-width: 100px;
}

.img-logo {
  margin-right: auto;
}

.container {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  height: 112px;
  width: 100%;
  background: #fff;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.navBar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navBar-wrapper div {
  font-size: 16px;
  line-height: 24px;
  color: #323232;
  margin-top: 28px;
}

.home {
  font-weight: 700 !important;
  color: #F78434 !important;
}
<header class = "header">

  <div class = "container">
    <nav class = "navBar">

      <div class = "navBar-wrapper">
        <div class = "img-logo">
          <img src = "https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt = "" srcset = ""></div>


        <div class = "home">Home</div>
        <div class = "aboutUs">About us</div>
        <div class = "findSpace">Find space</div>
        <div class = "share-space">Share space</div>
        <div class = "promoteSpace">Promote space</div>

      </div>

    </nav>
  </div>

</header>

Другие вопросы по теме

Похожие вопросы