Вылезают элементы за пределы блока?

132
29 ноября 2019, 12:10

Такая проблема, делаю верстку на флексбокс, а элементы вылезают за пределы блока, как это исправить?

Вот код:

.header { 
	background: url(../img/header-bg.jpg) no-repeat center top / cover; 
	min-height: 100vh; 
	position: relative; 
	z-index: 1000; 
	padding-top: 40px; 
} 
 
.header::before { 
	content: ""; 
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	z-index: -1000; 
	background: rgba(0, 0, 0, 0.50); 
} 
 
.header__navigation { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	align-items: center; 
	background: red; 
} 
 
.header__logo { 
	font-family: 'Wisdom-Script'; 
	font-size: 26px; 
	color: #fed136; 
} 
 
.header__menu { 
	display: flex; 
	flex-wrap: wrap; 
}
<header id="header" class="header"> 
	<div class="container"> 
		<nav class="header__navigation"> 
			<a href="#" class="header__logo"> 
				Golden 
			</a> 
			<ul class="header__menu"> 
				<li class="header__menu-item"> 
					<a href="#" class="header__menu-link"> 
						Home 
					</a> 
				</li> 
				<li class="header__menu-item"> 
					<a href="#" class="header__menu-link"> 
						Services 
					</a> 
				</li> 
				<li class="header__menu-item"> 
					<a href="#" class="header__menu-link"> 
						Portfolio 
					</a> 
				</li> 
				<li class="header__menu-item"> 
					<a href="#" class="header__menu-link"> 
						About 
					</a> 
				</li> 
				<li class="header__menu-item"> 
					<a href="#" class="header__menu-link"> 
						Contact 
					</a> 
				</li> 
			</ul> 
		</nav> 
		<div class="header__offer"> 
			<div class="title"> 
				Welcome To Our Studio 
			</div> 
			<h1> 
				it's nice to meet you 
			</h1> 
			<a href="#" class="btn"> 
				Tell Me More 
			</a> 
		</div> 
	</div> 
</header>

Answer 1

Если я вас правильно понял, то вам нужно было убрать полосу прокрутки и оставить padding для header-a

body {padding: 0; margin: 0;} /* Уберу все отступы чтобы было красиво(хотя бы немного) */ 
.header { 
	background: url(../img/header-bg.jpg) no-repeat center top / cover; 
	min-height: 100vh; 
	position: relative; 
	z-index: 1000; 
	background: gray; 
	padding-top: 40px; 
	/* Убрал полосу прокрутки */ 
	box-sizing: border-box; 
} 
/* .header::before { 
	content: ""; 
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	z-index: -1000; 
	background: rgba(0, 0, 0, 0.50); 
} 
 */ 
.header__navigation { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	align-items: center; 
	background: red; 
} 
 
.header__logo { 
	font-family: 'Wisdom-Script'; 
	font-size: 26px; 
	color: #fed136; 
} 
 
.header__menu { 
	/* Убрал точки списков */ 
	list-style: none; 
	/* Добавил расстояние между ссылками */ 
	justify-content: space-around; 
	display: flex; 
	flex-wrap: wrap; 
	/* Дал .header__menu немного места чтобы он мог "дышать" */ 
	width: 350px; 
}
<link rel="stylesheet" href="style.css"/> 
<header id="header" class="header"> 
    <div class="container"> 
        <nav class="header__navigation"> 
            <a href="#" class="header__logo">Golden 
			</a> 
            <ul class="header__menu"> 
                <li class="header__menu-item"> 
                    <a href="#" class="header__menu-link">Home 
					</a> 
                </li> 
                <li class="header__menu-item"> 
                    <a href="#" class="header__menu-link">Services 
					</a> 
                </li> 
                <li class="header__menu-item"> 
                    <a href="#" class="header__menu-link">Portfolio 
					</a> 
                </li> 
                <li class="header__menu-item"> 
                    <a href="#" class="header__menu-link">About 
					</a> 
                </li> 
                <li class="header__menu-item"> 
                    <a href="#" class="header__menu-link">Contact 
					</a> 
                </li> 
            </ul> 
        </nav> 
        <div class="header__offer"> 
            <div class="title">Welcome To Our Studio 
			</div> 
            <h1>it's nice to meet you 
			</h1> 
            <a href="#" class="btn">Tell Me More 
			</a> 
        </div> 
    </div> 
</header>

Answer 2

Если я правильно тебя понял, то проблема с этим, изображение:

Наезжают друг на друга. В твоей задаче недостаточно конкретики. Но, если я правильно понял, то вот решение, прописываешь в CSS:

li.header__menu-item {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
}
li.header__menu-item:last-child {
    margin-right: 0px;
}
READ ALSO
как менять цвет текста Логотипа исходя из фона [закрыт]

как менять цвет текста Логотипа исходя из фона [закрыт]

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

176
Исчезает input при изменении значения

Исчезает input при изменении значения

Имеется див с contenteditable="true", я его редактирую и с помощью jQuery кладу текст дива в скрытое поле name="name_edit{{ $class->id }}" для дальнейшей передачи на серверИ...

114
Поймать действие

Поймать действие

Задача: Выполнить отправку голосовых сообщений

151
Многократная отправка Ajax запроса

Многократная отправка Ajax запроса

Я не знаю по какой именно причине, при отправке одного Ajax запроса отправляется два или более повторныхЭто может происходить, может нет

145