Как обрезать линию?

Question

[Дима]

Вот как нужно:

Вот как у меня:

Как ее обрезать?

Код на: https://codepen.io/_Dima1995_/pen/oNeKggR

Comments

[FeST1VaL]

Так у вас контентная область же есть... в нее и надо было вставлять...

[Ankhena]

Дело в том, что hr имеет семантическую нагрузку: разделитель контента на смысловые секции.
Но вы уже используете тег section.
А значит, hr лишний.

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

p.s. перед тем как задавать кому-то margin-left: 200px, подумайте о том, что размеры окна браузера (viewport) у разных пользователей могу быть разными. Просто попробуйте хотя бы изменить ширину окна. А лучше через адаптивный режим в инструментах разработчика.

А вам, судя по всему, нужно вовсе не получить отступ в 200, а центрировать блок.
Самое простое это задать ему правый и левый margin в auto. Остальные варианты легко гуглятся по запросу "css центрирование блоков"

Answer 1

[Alex_mos]

Задай размеры и отцентруй или ограничь блоком

Answer 2

[Vladislav]

Через before или after, сделай из этого блок наложи поверх картинки с высотой, которая тебе нужна ну и ширину в 100%, суть думаю уловил

Answer 3

[FrelFrloich]

hr{
        width: 71%;
	height: 2px;
	background: black;
}

Если прям так охото через hr,

Answer 4

[Froggyweb]

советы странные
наверняка лучше сделать обертку списку категорий.
Меня больше интересует зачем

.left-nav2 {
    margin-left: 200px;
}

это ад, а обрезать линию - вторично