Такая проблема, делаю верстку на флексбокс, а элементы вылезают за пределы блока, как это исправить?
Вот код:
.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>
Если я вас правильно понял, то вам нужно было убрать полосу прокрутки и оставить 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>
Если я правильно тебя понял, то проблема с этим, изображение:
Наезжают друг на друга. В твоей задаче недостаточно конкретики. Но, если я правильно понял, то вот решение, прописываешь в CSS:
li.header__menu-item {
display: inline-block;
list-style: none;
margin-right: 10px;
}
li.header__menu-item:last-child {
margin-right: 0px;
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Как менять цвет текста Логотипа исходя из фонашапка прилипает к верху с прозрачным фоном, логотип чёрный нужно чтобы при скролле когда например...
Имеется див с contenteditable="true", я его редактирую и с помощью jQuery кладу текст дива в скрытое поле name="name_edit{{ $class->id }}" для дальнейшей передачи на серверИ...
Я не знаю по какой именно причине, при отправке одного Ajax запроса отправляется два или более повторныхЭто может происходить, может нет