Aligner mon Logo avec mon contenu

Bonjour,

Je m'entraine avec le html et css et je voulais remplir ma page de cards jusque la ok et j'ai deux css un pour ma navbar et mon style.css et je ne parviens pas aligner mon Logo avec mes cards.

Pouvez vous me dire ou est le soucis dans mon css ?

mon html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
 
    <nav>
        <div class="logo"><a href="index.html"></a>LOGO</div>
        <ul>
            <li><a href=""><i class="fas fa-home"></i> Home</a></li>
            <li><a href="test.html"><i class="fas fa-info-circle"></i> Info</a></li>
            <li><a href=""><i class="fas fa-cogs"></i> Services</a></li>
            <li><a href=""><i class="fas fa-envelope"></i> Contact</a></li>
        </ul><br><br>
 
        <div class="cards">
 
            <div class="card red"><a href="test.html">hover 1</a></div>
            <div class="card blue"><a href="#">hover 2</a></div>
            <div class="card green"><a href="#">hover 3</a></div>
            <div class="card orange"><a href="#">hover 4</a></div>
            <div class="card red"><a href="test.html">hover 5</a></div>
            <div class="card blue"><a href="#">hover 6</a></div>
            <div class="card teal"><a href="#">hover 7</a></div>
            <div class="card aqua"><a href="test.html">hover 8</a></div>
            <div class="card marron"><a href="#">hover 9</a></div>
            <div class="card fushia"><a href="#">hover 10</a></div>
            <div class="card lime"><a href="#">hover 11</a></div>
            <div class="card navy"><a href="#">hover 12</a></div>
            <div class="card purple"><a href="test.html">hover 13</a></div>
            <div class="card DarkSalmon"><a href="#">hover 14</a></div>
            <div class="card LimeGreen"><a href="#">hover 15</a></div>
            <div class="card Red"><a href="#">hover 16</a></div>
            <div class="card SeaGreen"><a href="#">hover 17</a></div>
            <div class="card Violet"><a href="#">hover 18</a></div>
            <div class="card Wheat"><a href="test.html">hover 19</a></div>
            <div class="card Sienna"><a href="#">hover 20</a></div>
            <div class="card SlateGray"><a href="#">hover 21</a></div>
            <div class="card Plum"><a href="#">hover 22</a></div>
            <div class="card RoyalBlue"><a href="test.html">hover 23</a></div>
            <div class="card SpringGreen"><a href="#">hover 24</a></div>
            <div class="card OrangeRed"><a href="#">hover 25</a></div>
        </div>
    </nav>
</body>

Mon style.css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
 
body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    background-color: #000;
}
 
.cards {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px;
}
 
.cards a {
    color: #fff;
    text-decoration: none;
}
 
.cards>.red {
    background-color: #f43f5e;
}
 
.cards>.blue {
    background-color: #3b82f6;
}
 
.cards>.green {
    background-color: #22c55e;
}
 
.cards>.orange {
    background-color: #FFA500;
}
 
.cards>.marron {
    background-color: #800000;
}
 
.cards>.teal {
    background-color: #008080;
}
 
.cards>.aqua {
    background-color: #00FFFF;
}
 
.cards>.fushia {
    background-color: #FF00FF;
}
 
.cards>.lime {
    background-color: #00FF00;
}
 
.cards>.navy {
    background-color: #000080;
}
 
.cards>.purple {
    background-color: #800080;
}
 
.cards>.DarkSalmon {
    background-color: #E9967A;
}
 
.cards>.LimeGreen {
    background-color: #32CD32;
}
 
.cards>.Red {
    background-color: #FF0000;
}
 
.cards>.SeaGreen {
    background-color: #2E8B57;
}
 
.cards>.Violet {
    background-color: #EE82EE;
}
 
.cards>.Wheat {
    background-color: #F5DEB3;
}
 
.cards>.Sienna {
    background-color: #A0522D;
}
 
.cards>.SlateGray {
    background-color: #708090;
}
 
.cards>.Plum {
    background-color: #DDA0DD;
}
 
.cards>.RoyalBlue {
    background-color: #4169E1;
}
 
.cards>.SpringGreen {
    background-color: #00FF7F;
}
 
.cards>.OrangeRed {
    background-color: #FF4500;
}
 
.cards>.card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100px;
    width: 250px;
    border-radius: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 1s;
}
 
.cards>.card:hover {
    transform: scale(1.1, 1.1);
}
 
.cards:hover>.card:not(:hover) {
    filter: blur(10px);
    transform: scale(0.9, 0.9);
}

Ma navbar.css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
nav {
    position: relative;
    top: -45px;
    padding: 16px 80px;
    display: inline;
    justify-content: center;
    align-items: center;
}
 
.logo {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
}
 
ul {
    list-style: none;
    text-align: center;
}
 
ul li {
    display: inline;
    margin: 20px;
}
 
ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
}
 
ul li a i {
    margin-left: 5px;
    color: #03fce8;
}