Всё из-за flex-direction: column
- ваши блоки выстроены по вертикальной оси.
Если Вы используете display: flex
для родительского элемента, то свойство float для дочернего элемента работать не будет. Ну и вообще float здесь не нужен, он используется для обтекания элемента другими элементами. Подробнее можно почитать здесь: https://learn.javascript.ru/float
Также непонятно зачем вообще здесь нужно использовать флексбоксы, если можно обойтись position: absolute
для отцентровки блоков.
Еще одна проблема, которую я заметил в вашей верстке - ваши ссылки помещены в блоки, соответственно сами блоки не кликабельны и пользователю необходимо кликать именно по тексту ссылки, чтобы она сработала. Так делать не стоит. Можно убрать div, которые оборачивают ссылки и поставить тегам ссылок классы этих дивов, чтобы их стилизовать, так мы сделаем полноценно кликабельные кнопки.
Реализация без флексбоксов:
Добавляем обертку, которую будем центровать с помощью position: absolute
, удаляем настройки флексбоков, удаляем float у элементов, удаляем div, которые оборачивают наши ссылки, добавляем ссылкам классы down и det.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Gilroy', sans-serif;
}
h1 {
margin-top: 0;
}
a {
color: inherit;
text-decoration: none;
}
.main-content {
position: relative;
height: 100vh;
background-color: #222020;
}
.center {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.zag {
color: white;
font-family: 'Graphik LCG', sans-serif;
margin-bottom: 30px;
}
.down {
color: white;
background-color: #2f1ce4 ;
padding: 20px;
border: 3px solid #2f1ce4;
}
.det {
color: white;
padding: 20px;
border: 3px solid white;
background: rgba(0, 125, 215, 0,7);
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-content">
<div class="center">
<h1><a href="skillbox.html" target="_blank" class="zag">Skillbox</a></h1>
<a class="down" href="Skillbox_Layout.docx"download>Скачать програму курса</a>
<a class="det" href="skillbox.html">Подробно</a>
</div>
</div>
</body>
</html>
Если Вы всё же по какой-то причине хотите реализовать это с помощью флексбоксов, то Вам достаточно обернуть ссылки в отдельный блок и удалить float.
Реализация с помощью флексбоксов:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Gilroy', sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
.main-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222020;
}
.zag {
color: white;
font-family: 'Graphik LCG', sans-serif;
margin-bottom: 30px;
}
.down {
color: white;
background-color: #2f1ce4 ;
padding: 20px;
border: 3px solid #2f1ce4;
}
.det {
color: white;
padding: 20px;
border: 3px solid white;
background: rgba(0, 125, 215, 0,7);
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-content">
<h1><a href="skillbox.html" target="_blank" class="zag">Skillbox</a></h1>
<div class="content">
<a class="down" href="Skillbox_Layout.docx"download>Скачать програму курса</a>
<a class="det" href="skillbox.html">Подробно</a>
</div>
</div>
</body>
</html>