Как правильно разместить margin-right в сайдбаре с помощью CSS в Django>

Я пытался разделить текст и иконку с помощью этого кода


{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{% static 'css/styles.css'%}">
    <!-- <link href="{% static 'css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="{% static '/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->
    <link href="{% static 'css/bootstrap.min.css'%}" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    <title>Document</title>
</head>
<body>
    <div class="sidebar">
        <header>Menu</header>
        <a href="#" class="active"><i class="fas fa-qrcode"></i><span>Dashboard</span></a>
        <a href="#"><i class="fas fa-link"></i><span>Data Entry</span></a>
        <a href="#"><i class="fas fa-stream"></i><span>List</span></a>
    </div>
</body>
</html>

CSS-код

a.active,a:hover{
    border-left: 5px solid #019321;
    color: #bfeb74;
  }

.sidebar a i{
    margin-right: 300px;

введите описание изображения здесь

Это должно выглядеть следующим образом. Тот же код, что и на codepen.io. Введите описание изображения здесь

Пожалуйста, добавьте подложку в span.

span { padding-left: 20px; }

Просто вы можете изменить следующим образом:

вместо этого: 

.sidebar a i{
    margin-right: 300px;

Попробуйте это: 

.sidebar > a > i {
    margin-right: 300px;

Это будет работать идеально.

Примечание: Добавьте значение пикселя, сколько хотите

Я думаю, это потому, что вы применяете margin в инлайн-теге(?)

a.active,a:hover{
    border-left: 5px solid #019321;
    color: #bfeb74;
  }

.sidebar a i {
   margin: 300px;
}

.sidebar a * {
    display: block;
}
Вернуться на верх