Здравствуйте, я новичок в html/css и вот недавно начал верстать для себя макет, так сказать пора бы уже и практикой заниматься, а не инфодрочить.
Ах да, суть вопроса, я не понимаю почему у меня текст в теге "p" и кнопки input[type="button"] прижимаются к левому краю, а вот с h1 какая то беда, не хочу намерено прописывать ему margin-right, думаю может какое то есть скрытое св-во, которое по стандартам делает отступы с лева, да кстати margin и padding сбрасывал.
При выделение видно отступ слева в пару пикселей.
Вот скрины и код:
p.s Так же можете меня поругать за неправильный код, я бы хотел послушать адекватную критику.
<div class="title">
<h1>Luis Oenrique</h1>
<p>User Experience / User Interface Expert</p>
<input class="title_button1 button button-active" type="button" value="Know more">
<input class="title_button2 button" type="button" value="Hire me">
</div>
.title {
margin-top: 180px;
}
.title h1 {
line-height: 100px;
margin: 0;
font-size: 90px;
font-weight: 500;
color: #4d4d4d;
}
.title p {
font-size: 22px;
font-weight: 400;
color: #4d4d4d;
}
.button {
width: 160px;
height: 50px;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin-top: 22px;
background: none;
border: 1px solid #4d4d4d;
color: #4d4d4d;
display: inline-block;
}
.title_button2 {
margin-left: 20px;
}
.button:hover {
background: white;
border:none;
box-shadow: 0px 18px 26.68px 2.32px rgba(0, 0, 0, 0.1);
}
.button-active {
background: white;
border:none;
box-shadow: 0px 18px 26.68px 2.32px rgba(0, 0, 0, 0.1);
}
Простой
Простой