попытался сверстать header для макета и столкнулся с проблемой, что в моем css коде, а именно в .btn не хочет работать padding и border-radius, как только эти стили я прописал в style у HTML они сразу же заработали.
Подскажите пожалуйста как сделать так, чтобы мой код писался именно через css, использую так же препроцессор LESS, но не думаю что это как то влияет на это.
/*Colors */
/* Basic setting */
html {
font-size: 10px;
}
/* Typography */
section {
padding: 10rem 0;
}
/*main*/
main {
padding: 3rem 0;
}
.btn {
background-color: #fcb303;
color: #ffffff;
border-radius: 8px;
padding: 1rem 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Verstka maketa</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container">
<div class="header">
<div class="row">
<div class="col-3">
<div class="logo">
<img src="#" alt="Gipsolit logo">
</div>
</div>
<div class="col-2 offset-4">
<a href="#">+7 495 771 05 08</a>
</div>
<div class="col-3">
<button class="btn header-btn" style="padding: 10px 30px">
Получить консультацию
</button>
</div>
</div>
</div>
</div>
</main>
</body>
</html>