Непонятные отступы на странице и между страницами
подскажите, пожалуйста, из-за чего мог возникнуть отступ справа и как от него избавиться? даже упустила момент, когда он появился...
пока пыталась понять, появился и разрыв между страницами...
body, html {
margin: 0;
padding: 0;
height: 100%;
font-size: 40px;
position: relative;
}
.main-image {
background-image: url(images/pexels-evie-shaffer-2395249.jpg);
min-height: 100%;
position: relative;
background-position: center;
background-size: cover;
}
.heading {
position: absolute;
top: 30%;
width: 100%;
text-align: center;
letter-spacing: 5px;
color: rgb(187, 107, 157);
padding: 15px;
text-transform: uppercase;
}
.border {
border: 2px solid rgb(148, 94, 147);
border-radius: 00px;
padding: 70px;
border-style: dotted;
}
.main-text {
position: absolute;
top: 50%;
left: 30%;
right: 30%;
text-align: center;
font-size: 20px;
border: 2px solid rgb(148, 94, 147);
padding: 5px;
background-color: rgb(148, 94, 147);
box-shadow: 12px 5px 10px rgba(0, 0, 0, 0.5);
letter-spacing: 2px;
}
#second-page {
background-image: url(images/pexels-alena-koval-961402.jpg);
min-height: 100%;
background-position: center;
background-size: 100%;
position: relative;
}
.second-heading {
position: absolute;
}
.product-box {
width: 67%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: auto;
}
.products {
flex-basis: 50%;
text-align: right;
border-radius: 7px;
margin-bottom: 20px;
color: white;
position: relative;
}
.products img {
width: 60%;
border-radius: 7px;
margin-top: 150px;
margin-left: 550px;
}
.overlay {
width: 60%;
height: 62%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(244, 115, 224, 0.5), rgb(87, 21, 86));
margin-top: 150px;
margin-left: 550px;
opacity: 0;
transition: 1s;
}
.products:hover .overlay {
opacity: 1;
}
.product-desc {
width: 200px;
position: absolute;
bottom: 0%;
left: 104%;
top: 150px;
transform: translateX(-50%);
color: black;
font-size: 19px;
text-align: center;
}
Ответы (1 шт):
Автор решения: Василий Музыка
→ Ссылка
для отлова "вывалившегося" блока примените временный селектор
*{border:1px solid #000;}
если лень - можно скрыть нижний скрол добавив overflow-x: hidden; для body, html
body, html {
margin: 0;
padding: 0;
height: 100%;
font-size: 40px;
position: relative;
overflow-x: hidden;
}