1

Текст не сместился вправо, а просто остался под картинкой:

описаниеЯ хотел бы в классе header_inner между картинкой и текстом сделать отступ, но justify-content: space-between; не работает. Вот написанный html код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf=8">
        <link href="https://fonts.googleapis.com/css2? family=Lato:ital,wght@0,300;0,700;0,900;1,300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="webpaint.css">
        <title>We are Webpaint</title>
    </head> 
    <body>
        <header class="header">
            <div class="container">
                <div class="header__inner">

                    <div class="header__logo">
                        <div class="im1"><img src="images/Logo.png" alt="Logo"></div>
                    </div>
                

                    <nav class="nav">
                        <a class="nav__link" href="#">HOME</a>
                        <a class="nav__link" href="#">PORTFOLIO</a>
                        <a class="nav__link" href="#">ABOUT</a>
                        <a class="nav__link" href="#">BLOG</a>
                        <a class="nav__link" href="#">CONTACT</a>
                    </nav>
                
                </div>
            </div>
        </header>
    </body>
</html>

Часть кода CSS:
    .header__inner{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
3
  • В вашем коде картинка и текст находятся в одной строке. Картинка прижата к левому краю окна, текст - к правому. А как вам нужно, чтобы было? Что значит "не работает"?
    – Quazimorda
    26 мая 2021 в 8:16
  • Согласен, у вас justify-content: space-between; работает.
    – Max Watson
    26 мая 2021 в 8:31
  • Проверьте правильно ли подключены у вас css стили
    – Max Watson
    26 мая 2021 в 9:20

1 ответ 1

1
justify-content: space-between;

Должно работать, но у Вас даже flex не применился. Проверьте путь к файлу стилей. Возможно Вам стоит добавить еще type:

<link rel="stylesheet" type="text/css" href="webpaint.css">

А вообще, css файлы обычно лежат в папке css, поэтому:

<link rel="stylesheet" type="text/css" href="css/webpaint.css">

Проверить подключен ли стиль можно в chrome нажав f12, и посмотреть нет ли ошибок. А во вкладке source должен быть Ваш файл стилей. Например, у меня это

<link rel="stylesheet" type="text/css" href="css/style.min.css">

и вот он на скрине подключен

введите сюда описание изображения

А еще если в VS code Зажать ctrl и нажать на путь к файлу, то Вас должно перебросить в сам файл. Если этого не происходит, Вы неправильно его подключили.

Ну и последнее: Сохраните все файлы, а затем обновите страницу с Вашим сайтом, тогда стили должны примениться, если файл css подключен.

1
  • спасибо больное, @Konstantin_SH, когда нажал f12 в header_inner оказывается ничего не было. теперь исправил
    – L Lawliet
    26 мая 2021 в 10:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.