Непонятные отступы слева

@Sonicos · Регистрация: 07.11.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Тренируюсь в вёрстке, и столкнулся вот с чем. На скрине в правом элементе видно, что у текста отступы от левого края блока. При чём, у Title один отступ, у текста под ним отступ по-меньше. А вот кнопка отображается, как задумано.
margin, padding я не указывал. Эти отступы присутствуют и при использовании Flex и при Grid.
Что это может быть?

HTML5

<main class="page">
            <div class="page__block-1">
                <div class="block-1__container _container">
                    <div class="block1__content _content">
                        <div class="content__item block-1__img"><img src="img/decor/1_grl.png" alt="Картинка">
                        </div>
                        <div class="content__item right-side-item">
                            <div class="content__title">Balance Your
                                Body and Mind</div>
                            <div class="content__text">Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div>
                            <button class="button">join us now</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

CSS

body {
    font-family: "Open Sans";
    color: #484f5b;
}
.wrapper {
    min-height: 100%;
    overflow: hidden;
}
._container {
    max-width: 1351px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: content-box;
    border: 1px solid #000;
}
._content {
    display: flex;
    align-items: center;
    padding: 86px 0;
}
.button {
    width: 203px;
    height: 50px;
    background: #e7c9c4;
    color: inherit;
    text-transform: uppercase;
    font-size: 21px;
    font-weight: bold;
}
.content__item {
    border: 1px solid #000;
}
.block-1__img img {
    max-width: 602px;
}
.content__title {
    font-size: 74.5px;
    font-weight: bold;
    letter-spacing: 0.75px;
    line-height: 1.3;
    text-align: left;
}
.content__text {
    margin: 66px 0 82px 0;
    font-size: 21px;
    font-weight: normal;
    letter-spacing: 0.21px;
    line-height: 1.57;
    text-align: left;
}

@Sonicos · 10.01.2022, 22:18 **[ТС]**

Забыл скрин сразу прикрепить. Исправляюсь )

@NTHing · 10.01.2022, 22:40

Это так отображаются текстовые символы. У самого дива отступов нет. Поставьте диву фоновый цвет и увидите, что он прижат к левому краю.

@Sonicos · 11.01.2022, 08:36 **[ТС]**

Ну да. Я к такому выводу и пришёл тоже, что проблема в шрифте. Пришлось добавлять отрицательные margin к этим блокам.

@NTHing · 11.01.2022, 09:48

Сообщение от Sonicos

Пришлось добавлять отрицательные margin к этим блокам.

Такой вариант не очень... А если первой буквой будет не "B", а "Y", то марджины обнулять будете? ))

@Sonicos · 11.01.2022, 10:35 **[ТС]**

Тоже верно))) Видимо, только мириться с этим остаётся.

@Sonicos 1 / 1 / 2 Регистрация: 07.11.2014 Сообщений: 94
	10.01.2022, 22:18 [ТС]	2
	Забыл скрин сразу прикрепить. Исправляюсь ) Миниатюры 0

@NTHing 1791 / 940 / 381 Регистрация: 26.11.2014 Сообщений: 1,915 Записей в блоге: 1
	10.01.2022, 22:40	3
	Это так отображаются текстовые символы. У самого дива отступов нет. Поставьте диву фоновый цвет и увидите, что он прижат к левому краю. 0

@Sonicos 1 / 1 / 2 Регистрация: 07.11.2014 Сообщений: 94
	11.01.2022, 08:36 [ТС]	4
	Ну да. Я к такому выводу и пришёл тоже, что проблема в шрифте. Пришлось добавлять отрицательные margin к этим блокам. 0

@NTHing 1791 / 940 / 381 Регистрация: 26.11.2014 Сообщений: 1,915 Записей в блоге: 1
	11.01.2022, 09:48	5
	Сообщение от Sonicos Пришлось добавлять отрицательные margin к этим блокам. Такой вариант не очень... А если первой буквой будет не "B", а "Y", то марджины обнулять будете? )) 0

@Sonicos 1 / 1 / 2 Регистрация: 07.11.2014 Сообщений: 94
	11.01.2022, 10:35 [ТС]	6
	Тоже верно))) Видимо, только мириться с этим остаётся. 0