В HTML коде написана одна структура а браузер мне сделает совсем другую. Элемент PAY должен находится внутри родителя, а он выходит за рамки
Браузер мне пишет:
А в коде написано:
<div id="content">
<header>
<h1>Самое популярное</h1>
</header>
<div id="container">
<a id="container-item">
<a class="pay">Кнопочка</a>
</a>
</div>
</div>
Css код:
#content #container {
display: flex;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
width: calc(100% - 30px);
}
#content #container #container-item {
flex: 250px;
background-color: #fff;
height: 300px;
border-radius: 6px;
margin: 20px;
transition: .3s all;
max-width: 500px;
position: relative;
}
#content #container #container-item:before {
content: '';
border-radius: 5px;
top: 10px;
border: 10px solid transparent;
border-left: 10px solid #528ACA;
border-top: 10px solid #528ACA;
position: absolute;
left: 10px;
}
#content #container #container-item:hover {
-webkit-box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
box-shadow: 3px 2px 25px 0px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
cursor: pointer;
}
#content #container .pay {
padding: 10px;
background-color: #528ACA;
color: #fff;
border-radius: 5px;
}