Как расставить элементы в шапке сайта?

Question

[nika-tesla]

Как сделать что-бы лого осталось на месте а вот кнопки - Главная и так далее были с права?

<header>
       <div class="conteiner">
       	<nav class="navbar">
         <img src="img/logo.svg" alt="123" class="navbar__logo-image">
           <div class="navbar__logo-text"><b>ProgramOFF</b><br>компютерный сервис</div>
           <ul>
           	<li>Главная</li>
           	<li>Услуги</li>
           	<li>Как мы работаем</li>	
           	<li>Отзывы</li>
           	<li>Контакты</li>
           </ul>
       </nav>
       
       </div>
    </header>

body {
    margin: auto;
    font-family: montserrat;
    /*background-color: #FBF8FF;*/

  /*Шапка*/

  header .conteiner {
    display: flex;
    justify-content: space-between;
  }

  nav li {
    display: inline;
    margin: 24px
}
    /* Контейнер */

  .conteiner{
      width: 1280px;
      margin: 0 auto;
      max-width: 100%;
  }

/*Логотип*/

  .navbar {
    display: flex;
    width: 1280px; 
    align-items: center;
    background-color: #FBF8FF;
    color: #0B2347;
    height: 90px;
  }

  .navbar__logo-image {
    margin-right: 15px;
    width: 32px
  }

  .navbar__logo-text {
    font-size: 12px;
  }

Answer 1

[ItsInTheGameRU]

к .navbar добавь justify-content: space-between
и вот это засунь под одну обертку

<img src="img/logo.svg" alt="123" class="navbar__logo-image">
<div class="navbar__logo-text"><b>ProgramOFF</b><br>компютерный сервис</div>

<div>
  <img src="img/logo.svg" alt="123" class="navbar__logo-image">
  <div class="navbar__logo-text"><b>ProgramOFF</b><br>компютерный сервис</div>
</div>

и conteiner исправь на container а то глаз кровоточит :)

Comments

[ItsInTheGameRU]

и еще можешь удалить это:

header .conteiner {
    display: flex;
    justify-content: space-between;
  }

и width: 1280px; у .navbar

[ItsInTheGameRU]

nav li {
    display: inline;
    margin: 24px
}

нужно исправить на

nav li {
    display: inline-block;
    margin: 24px
}

потому что на inline не работают margin

[nika-tesla]

Тогда получается так

[nika-tesla]

а должно все идти в одну линию и лого и текст

[ItsInTheGameRU]

nika-tesla, примени к ним стили так чтобы они были в одну линию. Не все же за тебя делать.

[nika-tesla]

вот так получилось все ровно стоит

.logo-wrapper {
display: flex;
align-items: center;
}

[Михаил]

лого ссылкой

Answer 2

[iv-13]

Самый короткий способ наверно такой:

<header>
        <div class="container">
            <nav class="navbar">
                <div class="logo-wrapper">
                    <img src="img/logo.svg" alt="123" class="navbar__logo-image">
                    <div class="navbar__logo-text"><b>ProgramOFF</b><br>компютерный сервис</div>
                </div>
                <ul>
                    <li>Главная</li>
                    <li>Услуги</li>
                    <li>Как мы работаем</li>	
                    <li>Отзывы</li>
                    <li>Контакты</li>
                </ul>
            </nav>
        </div>
     </header>

.logo-wrapper {
    display: flex;
  }

/*Логотип*/

  .navbar {
    display: flex;
    width: 1280px; 
    align-items: center;
    background-color: #FBF8FF;
    color: #0B2347;
    height: 90px;
    justify-content: space-between;
  }

В целом, кончено, тут бы всё переделать у тебя...

Comments

[nika-tesla]

Почему переделать?

[nika-tesla]

.logo-wrapper {
display: flex;
align-items: center;
}

вот так все ровно будет