Bonjour à vous, je rencontre un blocage sur le responsive de mon menu, je souhaiterai qu'une fois que ma page se réduise à environ 1015 px de large (width),
mes liens s'inscrire et connexion se rapproche de mon lien contact avant de faire une burger menu. A partir de 1015px, les lien en question(s'inscrire et connexion restent statique) je chercher depuis trois jours mais je ne trouve toujours pas la solution si il y a quelqu'un qui peut m'apporter son aide merci d'avance.

Voici mon code HTML
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
 <header>
        <div class="container">
            <div class="div_test">
                 <h1><a href=""><img src="img/logo.svg" alt="logo" width='157' height="36" ></a></h1>       
            </div>
 
            <nav> <!-- container des ul -->
                <ul class="item_un">
                    <li><a href=""><i class="fa fa-home fa-lg"></i>Accueil</a> </li>
                    <li><a href=""><i class="fa fa-camera-retro fa-sm"></i>Galerie</a></li>
                    <li><a href=""><i class="fa fa-film fa-sm"></i>Vidéo</a></li>
                    <li><a href=""><i class="fa fa-id-card fa-sm"></i>Contact</a></li>
                </ul>
                <ul class="item_deux">
                    <li ><a class="inscription" href="">S'inscrire</a></li>
                    <li><a class="connexion" href="">Connexion</a></li>
                </ul>
            </nav> 
        </div>
    </header>  
    <section>
        <article>
            salut
        </article>
    </section>

et voici mon code Css
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
 body {
    background-color: rgb(223, 222, 222);
    margin: 0px;
    padding: 0px;
  } 
 
 
header{
background-color: rgb(255, 255, 255);
 
}
 
.container{
  display: flex;
  width:1000px;
  margin:auto;
}
 
 /*ITEM 1 h1 a img*/
h1{
  display: inline-block;
}
 
 /* ITEM 2 navigation générale*/
  /* container des items  ul */
nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
 
  /* UL  menu (Accueil Galerie Video contact) */
  /* flex sur les li*/
  .item_un{
    display: flex;
    padding: 10px;
    margin-left: 40px;
  }
 
  .item_un a{
    text-decoration: none;
    color:rgb(83, 83, 83);
  }
 
  /* UL liens S'inscrire et connexion*/
  /* flex sur les li*/
  .item_deux{
    display: flex;
    padding: 10px;
  }
 
  .item_deux a{
    text-decoration: none;
  }
 
 
  li{
    list-style: none;
    padding: 8px;
  }
 
  a{
    font-size: 1.2em;
  }
 
  .inscription{
    border: 1px solid #abc738;
    padding: 8px 12px 8px 12px;
    color:   #abc738;
  }
 
  .connexion{
    background-color:  #abc738;
    padding: 8px 12px 8px 12px;
    color: white;
  }
 
section{
  background-color: blue;
  width: 1000px;
  height: 1500px;
  margin:auto;
}