Почему justify-content: space-between; не действует на 2 иконки внизу страницы

Question

body {
    background: #212121;
    font-family: 'Comfortaa', cursive;
    text-align: center;
    
}
.t1 {
    text-align: center;
    
   
}
.textiki-1 {
    box-sizing: border-box;
    color: white;
    padding: 10px 20px;
    display: block;
    width: 300px;
    background-color: #212121;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    padding: 20px 30px;
    margin-left: 20px;
    margin-right: 20px;
    transition: 0.5s;
}
.textiki-1:hover {
    color: rgb(255, 255, 255);
    background-color: #2b2b2b;
}
.p-1 {
    text-align: center;
}
.texta {
    
   
    display: inline-flex;
    padding: 30px ;
   
    
    
    
}
hr {
    border: none; 
    background-color: rgb(255, 255, 255); 
    color: rgb(255, 255, 255);
    height: 5px;
    border-radius: 4px;
    width: 80%;
}
.bts {
    appearance: none;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 20px 400px;
    color: #212121;
    font-size: 28px;
    font-weight: 600;
    margin: 10px 20px;
    color: #ffffff;
    border: 3px solid #ffffff;
    transition: 0.4s;
    border-radius: 5px;
}
.bts:hover {
    color: black;
    background-color: white;
}
.links {
    margin-bottom: 0;
    margin: 10 10;
}
.inc {
    color: white;
}
.inc-2 {
    color: transparent;    
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right, #4facfe 30%, #00f2fe 50%);;
    text-decoration: none;
    font-weight: 1000;
    
    margin-bottom: 5px;
    margin-right: 5px;
}
.asd {
    margin-top: 100px;
}
body {
    background-color: #212121;
    font-family: 'Comfortaa', cursive;
    text-align: center;
    
    
}
.head {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    width: 100%;
    height: auto;
    background-color: #212121;
    color: white;
    display: block;
    text-align: left;
    
    
}
.btn-h {
    cursor: pointer;
    height: 8%;
    border: none;
    text-decoration: none;
    
    border-color: #ffffff ;
    border-width: 3px;
    
    font-size: 130%;
    font-weight: 600;
    appearance: none;
    background: none;
    outline: none;
    color: #ffffff;
    transition: 0.2s;
    
    font-family: 'Comfortaa', cursive;
    
}
.btn-h:hover {
    
    color: rgb(255, 255, 255);
    box-shadow: 0 0 10px rgba(0,0,0,0);
    padding: 0 10px;
    
    letter-spacing: 1px;
    
    
    
    
}
.fl {
    text-decoration: none;
    
}
.logo {
    vertical-align: middle;
    width: 40;
    height: 40;
    margin-left: 5;
   
}
.gif {
    vertical-align: middle;
    width: 40;
    height: 40;
    margin-bottom: 8px;
    margin-left: 5px;
    text-decoration: none;
}
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500&family=Oswald&family=Signika+Negative:wght@500&display=swap');
.f {
    display: flex;
    margin-left: 4px;
    align-items: center;
}
.inc {
    color: #30cfd0;    
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 1000;
    transition:0.3s ;
    
    background-color: linear-gradient(135deg, #30cfd0 0%, #4e66ff 100%);
}
.inc:hover {
    color: #2b9292;
    bac-kground-image: linear-gradient(270deg, #30d0d0 0%, #4e66ff 100%);
}
a {
    text-decoration: none;
}
.img {
    margin-right: 5px;
}
.ff {
    text-align: center;
    margin-right: 10;
}
.sss {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
}
.link {
    transition: 0.3s;
}
.link:hover {
    margin-bottom: 10px;
}

<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta property="og:title" content="Моды для лучшего ФПС">
<meta property="og:description" content="Здесь собраны сборки модов для версий 1.16.5-1.19, которые увеличат ваш ФПС">
<meta property="og:image" content="files/fon.png">
<link rel="shortcut icon" href="https://mods.flectone.ru/img/flectone_logo_400x400.png" type="image/png">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моды</title>
    <link rel="stylesheet" href="css/mods.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <header class="head">
        
        <a href="index.html" class="fl"><img src="./files/-5.gif" alt="" class="gif"> <button class="btn-h">Флектон</button></a>
        <a href="mods.html"><button class="btn-h hh" > Моды</button></a>
        <a href="farms.html"><button class="btn-h hh"> Фермы</button></a>
        <a href="rp.html"><button class="btn-h hh"> Ресурспаки</button></a>
        <a href="dp.html"><button class="btn-h hh">  Датапаки</button></a>
        
        
        
    </header>
    
    <div class="texta">
        <div class="textiki-1">
            <img src="./files/FPS.png" alt="fps" width="70" height="70" class="img-1">
            <h1 class="t1">ФПС ДО НЕБЕС</h1>
            <p class="p-1">Увеличивается количество ФПС в 3 раза</p>
        </div>
    
        <div class="textiki-1">
            <img src="./files/le.png" alt="fps" width="70" height="70" class="img-1">
            <h1 class="t1">ЛЕГКО УСТАНОВИТЬ</h1>
            <p class="p-1">Установка займёт всего пару секунд</p>
        </div>
    
        <div class="textiki-1">
            <img src="./files/new.png" alt="fps" width="70" height="70" class="img-1">
            <h1 class="t1">НА НОВЫЕ ВЕРСИИ</h1>
            <p class="p-1">Доступны все новые версии 1.16-1.19</p>
        </div>
    </div>
    <hr>
    <div>
        <img src="./files/2.png" alt="до" width="800" height="393">
        <img src="./files/1.png" alt="после" width="800" height="393">
    </div>
    <hr>
    <a href="./files/FlectoneMods.zip"><button class="bts"> Скачать</button></a><a>
        <div class="sss">
            <div class="f">
            <a href="https://www.youtube.com/c/%D0%A4%D0%B0%D1%81%D1%8D%D1%80" class="link"><img src="./files/yt.png" alt="" width="30" height="30" class="img"></a>
            <a href="" class="link"><img src="./files/ds.png" alt="" width="30" height="30" class="img"></a>
            </div>
            <div class="ff">
                <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><p class="inc">Flectone Inc</p></a>
            </div>
    
    
</body></html>

Откройте на всю страницу

Answer 1

У вас лишний тег <a> тут, в конце <a href="./files/FlectoneMods.zip"><button class="bts"> Скачать</button></a><a>

БЛОГ НА HUSL

Почему justify-content: space-between; не действует на 2 иконки внизу страницы

Ответы (1 шт):