Votre avis sur mon code partie (HEADER ET NAV)

Bonjour,

Je suis assez débutant en CSS et je rencontre souvent deux difficultés, la première est au niveau de l'intitulé des classes, j'ai du mal à définir mes classes correctement en anglais, y a-t-il une convention concernant cela ?

Ma deuxième difficulté, est au niveau de mon code, parfois je bricole et j'aimerais justement m'améliorer ainsi je pourrais assimiler les bonnes choses maintenant.

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
<header id="banner">
      <div class="header-transparent">
          <nav id="nav-secondary">
            <ul class="nav-secondary-left-list">
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Languages</a></li>
           </ul>
           <ul class="nav-secondary-right-list">
            <li><a href="#">Support</a></li>
            <li><a href="#">Login</a></li>
           </ul>
          </nav>
         <nav id="nav-primary">
           <ul>
             <li><a class="active" href="#">Home</a></li>
             <li><a href="#"> Plan</a></li>
             <li><a href="#">Commission</a></li>
             <li><a href="#">About us</a></li>
             <li><a href="#">Features</a></li>
             <li><a href="#">Register</a></li>
             <li><a href="#">Pages</a></li>
             <li><a href="#">Contact us</a></li>
           </ul>
         </nav>
         <div class="header-container">
            <div class="header-container-01">7.6%-18% daily for 16 days</div>
            <div class="header-container-02">Min deposit $10 - Max deposit $50,000</div>
            <div class="header-container-03">We accept Perfectmoney,Payeer and Bitcoin</div>
        </div>
      </div>
    </header>

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
body{
  margin: 0;
  padding: 0;
}
 
 
header{
  background-image: url("https://zupimages.net/up/20/13/5or2.jpg");
  height: 538px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
 
 
.header-transparent{
  height: 98px;
  margin: 0 0 2rem;
  background-color: rgba(0, 0, 0, 0.5);
}
 
 
#nav-secondary  {
  display: flex;
  justify-content: space-between;
}
 
#nav-secondary ul li {
  list-style: none;
  font-size: 11px;
}
 
 
.nav-secondary-left-list{
  margin-left: 430px;
}
 
.nav-secondary-right-list{
  margin-right: 80px;
}
 
#nav-primary{
  margin-right:60px;
  float: right;
}
 
 
nav ul{
  list-style: none;
  margin: 0.5rem;
  padding: 0;
}
 
 
nav ul li {
  display: inline-block;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
 
 
nav ul li a {
  padding: 8px 16px;
  text-decoration: none;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
}
 
 
nav ul li a:hover {
  background-color: #FFF;
  color: black;
}
 
.active {
  background-color: #cd2122;
  color: #FFF;
  padding: 8px 16px;
  border-radius: 3px;
}
 
.header-container{
  color: #fff;
  line-height: 1.3;
  text-align: center;
}
.header-container-01{
  font-size: 22px;
  border-left: 5px solid #fff;
  background-color: #000;
  margin-top: 284px;
  margin-left: 89px;
  width: 388px;
  padding: 4px 4px;
}
 
.header-container-02 {
  font-size: 30px;
  background: linear-gradient(300deg, transparent 0, transparent 50px, #000 0,#000 100%);
  opacity: 0.9;
  padding: 10px 10px 10px 10px;
  margin-top:  29px;
  width: 52%;
}
 
.header-container-03 {
  font-size: 16px;
  background: linear-gradient(300deg, transparent 0, transparent 50px, black 0,black 100%);
  padding: 10px 10px 10px 10px;
  opacity: 0.7;
  margin-top: 8px;
  width: 36%;
}

Je vous en suis reconnaissant pour votre aide.