How to put a margin-right in sidebar using CSS properly in Django>-CodePudding

I tried to put margin to separate text and icon using this code


{% 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 >
        <header>Menu</header>
        <a href="#" ><i ></i><span>Dashboard</span></a>
        <a href="#"><i ></i><span>Data Entry</span></a>
        <a href="#"><i ></i><span>List</span></a>
    </div>
</body>
</html>

CSS code

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

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

enter image description here

It should look like this. Same code that put in codepen.io. enter image description here

CodePudding user response：

Please add padding to the span.

span { padding-left: 20px; }

CodePudding user response：

i think its because you apply margin in a inline tag(?)

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

.sidebar a i {
   margin: 300px;
}

.sidebar a * {
    display: block;
}

CodePudding user response：

Simply you can change like this:

instead of this:

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

Try this:

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

This will work perfect.

Note: Add pixel value how much you want