Не могу понять почему так произошло. Свойства у кнопок одинаковые, все располагалось хорошо, но потом в какой-то момент съехало. Помогите разобраться пожалуйста
HTML код
<div class="columns mainscreen">
<div class="column column_1">
<div class="column_1_1">
<img class="col2_bg_mobile" src="img/В работе/решения.png" alt="Решения 100АМ"><br>
<span>1.</span>
<p>Зайдите на страницу</p>
<a href="linkhttps://www.100am.co/business/">https://www.100am.co/business/ <img src="img/В работе/link_icon.png" alt="Иконка ссылки"></a>
<p>и нажмите</p>
<button class="btn_1"><div class="col1_btn_title">Создать аккаунт
</div></button>
<div class="text_main_ili">или</div>
<button class="btn_2"><div class="col1_btn_title">Зарегистрироваться
</div></button>
</div>
<!-- <div class="col1_lines"> -->
<img class="col1_lines_lines" src="img/В работе/col1_lines.png" alt="Линии">
<img class="col1_lines_point" src="img/В работе/col1_lines_point.png" alt="Указатель">
<span class="col1_lines_span_2">2.</span>
<p class="col1_lines_header">Введите название компании</p>
<p class="col1_lines_text">(Используется как название группы, название компании в карточках участников можно изменить)</p>
<img class="col1_lines_team" src="img/В работе/new_team.png" alt="Create new team">
<!-- </div> -->
</div>
<div class="column col2">
<img class="col2_bg" src="img/В работе/решения.png" alt="Решения 100АМ">
<span>3.</span>
<p class="col2_header">Введите почту, на которую будет зарегистрирован аккаунт</p>
<p class="col2_text">(На эту почту не должен быть зарегистрирован личный аккаунт)</p>
<img class="col2_team" src="img/В работе/col2_email.png" alt="Enter email">
</div>
</div>
СSS код:
.column_1 {
line-height: 1.1;
p {
margin: 14px 0px 14px 9px;
font-size: 18px;
}
a {
display: inline-block;
width: 330px;
height: 47px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #1b232f;
padding-top: 2%;
text-decoration: underline;
font-size: 18px;
}
img {
height: 17px;
width: 17px;
margin-left: 2%;
}
.btn_1 {
height: 47px;
width: 158px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
background: linear-gradient(to right, #1be9fd 0%, #3bffb7 100%);
border: 0px;
font-size: 16px;
.col1_btn_title {
color: black;
.opn-bold
}
}
.text_main_ili {
display: inline;
font-size: 18px;
}
.btn_2 {
height: 47px;
width: 195px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
background: linear-gradient(to right, #1be9fd 0%, #3bffb7 100%);
border: 0px;
font-size: 16px;
.col1_btn_title {
color: black;
.opn-bold
}
}
Медиа запрос:
.column_1 {
p {
margin: 10px 0px 10px 7px;
font-size: 13px;
}
a {
width: 242px;
height: 35px;
font-size: 13px;
}
img {
height: 12px;
width: 12px;
}
.btn_1 {
height: 34px;
width: 116px;
font-size: 12px;
}
.text_main_ili {
font-size: 13px;
}
.btn_2 {
height: 35px;
width: 143px;
font-size: 12px;
}
Простой
