Bonjour à tous. Je me permet de vous demander conseils. Je n'arrive pas à aligner les 2 images sous-titré par : "street workout" et "muscu à la maison".
Pouvez vous m'aider s'il vous plaît ?

Voici mon code html:
Code : 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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Coaching-time</title>
 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
</head>
<body> 
    <header>
        <nav>
            <ul>
                <li id="logo"><a href="#">Coaching-time</a></li>
                <li><a href="#videos">Nos vidéos</a></li>
                <li><a href="#contact">Nous contacter</a></li>
                <li><a href="#about us ">A propos de nous</a></li>
            </ul>
        </nav>
        <div id="img_principale">
            <h1>Coaching-Time</h1>
            <div id="premier_trait">
                <h3>Vers un meilleur vous !</h3>
            </div>
        </div>
 
    </header>
 
    <section id="presentation">
        <div id="texte_intro">
            <h2>Un coaching d'exception pour une personne d'exception</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ad aspernatur, quam placeat repudiandae libero. Est natus, unde repudiandae commodi odio nemo numquam aspernatur beatae placeat adipisci corporis, saepe praesentium reprehenderit porro fugiat, molestiae vel sit officiis amet modi consectetur labore ipsum! Saepe vitae quas accusamus sint delectus nisi provident repellendus molestiae tempora, vero rerum numquam dolor quae laudantium ex quasi alias. Deleniti fuga voluptas aliquid praesentium ullam autem non a commodi culpa quidem eveniet, in quam ea porro ad.</p>
        </div>
        <div id="prestation">
            <div class="img_prestations">
                <h4>Street Workout</h4>
                <a href="#"><img src="media/image street workout 1.jpg" alt="image street workout"></a>
            </div>
        <div id="prestation">
            <div class="img_prestations">
                <h4>Muscu à la maison</h4>
                <a href="#"><img src="media/image push-up 1.jpg" alt="image push-up" ></a>
            </div>
        </div>
    </section>
    <section id="envie">
        <h2>Tant à découbrir ...</h2>
        <ul>
            <li id="handstand push-up"><p>Handstand push-up</p></li>
            <li id="human flag"><p>Human flag</p></li>
            <li id="v sit"><p>V-sit</p></li>
            <li id="single hand pump"><p>Single hand pump</p></li>
        </ul>
    </section>
    <footer>
        <form>
            <div id="copyrighteticons">
                <div id="copyright">
                    <span>©	Coaching-Time  2024</span>
                </div>
        </form>
    </footer>
</body>
</html>
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
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
@import url('https://fonts.googleapis.com/css?family=Advent+Pro|Dancing+Script&display=swap');
 
 
/******************GLOBAL********************/
body {
    /* police du corps de la page*/
    font-family: 'Advent Pro', sans-serif;
    /*marge... */
    padding: 0;
    margin: 0;
}
ul {
    /*marge... */
    padding: 0;
    margin: 0;
}
li{
    /* enlève tout style ou points à nos listes */
    list-style-type: none;
}
h2 {
    /* mettre tout nos H2 en majuscule */
    text-transform: uppercase;
    /*centrer tout nos H2 dans la page */
    text-align: center;
    padding-top: 30px;
    /* mettre une taille */
    font-size: 2em;
}
a {
    text-decoration: none;
    color: black;
}
/* ***********************NAVBAR**************************/
nav{
    /*Tout cequi dépassera de la page sera cacher*/
    overflow: hidden;
    background-color: #FFFAE1;
    position: fixed;
    /*largeur*/
    width: 100%;
    opacity: 0,9;
}
/*On va chercher les <li> dans le header*/
header li{
    /*mettre  l'élément à droite*/
    float: right;
    font-size: 1,2em;
}
header li a {
    text-decoration: none;
    /*Transforme en un bloc*/
    display: block;
    text-align: center;
    padding: 18px 16px;
}
#logo {
    font-family: 'Dancing Script', cursive;
    /*mettre en gras */
    font-weight: bold;
    float: left;
}
/*********************IMAGE PRINCIPALE ***********************/
/*appeler un id*/
#img_principale {
    padding-top: 60px;
    /*utilise l'image comme background. no-repeat fait quelle sera que une fois... et 50%50% qu'elle sera centré*/
    background: url(media/image\ pincipale.jpg) no-repeat 50% 50% fixed;
    /*l'image background couvrira toute la page*/
    background-size: cover;
    height: 450px;
}
h1 {
    font-family: 'Dancing Script', cursive;
    text-align: center;
    color: antiquewhite;
    font-size: 6em;
    margin-top: 110px;
    /*ajouter une ombre au texte (profondeur,décalage,opacité,)*/
    text-shadow: 1px 3px 2px black;
}
#premier_trait {
    height: 1px;
    width: 25%;
    /*pour raprocher (marge négative en vertical)*/
    margin: -3px auto;
    background-color: #FFFAE1;
    box-shadow: 1px 3px 2px black;
}
h3 {
    text-align: center;
    color: antiquewhite;
    font-size: 3em;
    text-shadow: 1px 3px 2px black;
}
/*********************SECTION PRESENTATION**********************/
#presentation {
    background-color: gainsboro;
    padding: 10px 0px 100px 0px;
}
#texte_intro {
    padding: 0px 20%;
}
#prestation {
    /*mettre tout aligné*/
    display: flex;
    /*Enrouler les images*/
    flex-wrap: wrap;
    /*s'étendre sur toute la largeur*/
    justify-content: space-between;
    padding: 30px 10%;
}
/*appeler une classe*/
.img_prestations h4 {
    font-family: 'Dancing Script', cursive;
    text-align: center;
    font-size: 1,8em;
    margin: 15px;
    font-weight: 300;
}
.img_prestations img {
    border-radius: 40px;
    width: 200px;
    height: 120px;
    box-shadow: 3px 4px 5px 4px rgba(0, 0, 0, 0,7);
}
/* quand on survole l'élément : hover*/
.img_prestations img:hover {
    opacity: 0,5;
    transform: scale(1,1);
    transition: 0,6s ease-in-out;
}
Voici le rendu actuel chez moi :
Nom : appeller_print().PNG Affichages : 177 Taille : 123,0 Ko
Par la même occasion. Si vous le pouvez, j'aimerais résoudre quelques petites choses rapidement.
Bonne fin de journée à vous !