Bonjour j'ai crée une page web et sur celle ci j'ai crée 2 div et j'aimerais mettre mes deux div cote a cote.

Genre je veux mettre le bloc Nos Pizzas a coté du bloc Bienvenue sur Pizzaiolo, comment je dois faire ?
Nom : Capture d’écran de 2020-04-09 18-00-07.png Affichages : 136 Taille : 181,0 Ko

Voici mon code HTML et CSS
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
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Bienvenue sur le site internet de PIZZAIOLO</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="wrapper">
		<header>
			<img src="images/logo.jpg">
			<p>La Pizza par Excellence à Djibouti</p>
			<nav></nav>
		</header>
		<nav>
			<ul>
				<li><a href="index.html" class="menu">ACCUEIL</a>
					<ul class="submenu">
						<li><a href="pizzaiolo.html">Pizzaiolo</a></li>
						<li><a href="haramous.html">Club House Haramous</a></li>
						<li><a href="Allo.html">Allo Pizza</a></li>
					</ul>
				</li>
				<li><a href="pizza.html" class="menu">PIZZAIOLO</a>
					<ul class="submenu">
						<li><a href="profile">Profil</a></li>
						<li><a href="goal.html">Objectif</a></li>
						<li><a href="team.html">Equipe</a></li>
						<li><a href="sale.html">Point de Vente</a></li>						
						<li><a href="culture.html">Culture</a></li>
					</ul>
				</li>
				<li><a href="#" class="menu">MENUS</a>
					<ul class="submenu">
						<li><a href="pizzaiolo.html">Menu de PIZZAIOLO</a></li>
						<li><a href="haramous.html">Menu de Club House</a></li>
						<li><a href="Allo.html">Menu de ALLO PIZZA</a></li>
					</ul>
				</li>
				<li><a href="#" class="menu">CONSOMMATEUR</a>
					<ul class="submenu">
						<li><a href="community.html">Communauté</a></li>
					</ul>
				</li>
				<li><a href="contact.html" class="menu">CONTACTEZ-NOUS</a></li>
			</ul>
		</nav>
		<div class="d1"></div>
		<div class="conteneur">
		</div>
		<div id="main">
			<div class="image"><img src="images/CarteCadeau.png">
				<h3 class="style_h3">Carte-Cadeau</h3>
				<p>Achetez une carte-cadeau et profitez des promotions spéciales!</p>
			</div>
			<div class="image"><img src="images/Salle_a_manger.png">
				<h3 class="style_h3">Commandez en ligne</h3>
				<p>Commandez en un clic nos pizzas, nos salades...</p>
			</div>
			<div class="image"><img src="images/facebook.png">
				<h3 class="style_h3">Pizzaiolo sur Facebook</h3>
				<p>Rejoignez Pizzaiolo sur Facebook ainsi que sur les réseaux sociaux!</p>
			</div>				
			<div class="image"><img src="images/Valeur_nutritive.png">
			  <h3 class="style_h3">Valeur nutritive</h3>
			  <p>Voir ici le tableau de la valeur nutritive de nos pizzas!</p>
			</div>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<div class="div1">
				<h2>Bienvenue sur PIZZAIOLO</h2>
				<p align="justify">En tant que restaurateur, fabricant de pizza, employeur, partenaire d'affaires et bon 
					citoyen corporatif, PIZZAIOLO Djibouti livre des pizzas de qualité. Nous offrons à nos 
					clients - de tous âges et de tous les goûts - un menu de haute qualité, varié et 
					savoureux. Notre entreprise est ainsi devenue chef de file à l'échelle nationale dans le 
					secteur de la restauration rapide, la meilleure pizzeria de Djibouti.
				</p>
				<ol type="1">
					<li>Un assortiment de pizzas gourmet classiques et exotiques</li>
					<li>De la croûte traditionnelle à la pâte multigrains de blé entier.</li>
					<li>Un menu varié qui comprend aussi bien des pizzas de premier choix que des salades des plus fraîches</li>
				</ol>
				<p>&nbsp;</p>
				<h2>Nos restaurants</h2>
				<p class="class">
					<a href="haramous.html"><img src="images/clubhouseaccueil.png" class="class1"></a>
					<a href="pizzaiolo.html"><img src="images/pizzaioloaccueil.png"class="class1"></a> 
					<a href="Allo.html"><img src="images/aviationaccueil.png" class="class2"></a>
				</p>
				<table width="428" border="0">
					<tr>
					  <td id="td_id"><a href="haramous.html">Club House Haramous</a></td>
					  <td class="td_class"><a href="pizzaiolo.html">Pizzaiolo ville</a></td>
					  <td class="td_class"><a href="Allo.html">Allo Pizza</a></td>
					</tr>
					<tr id="tr1">
					  <td align="center"><img src="images/menuimages/cliquez.gif" width="70" height="50"></td>
					  <td align="center"><img src="images/menuimages/cliquez.gif" alt="" width="70" height="50"></td>
					  <td align="center"><img src="images/menuimages/cliquez.gif" alt="" width="70" height="50"></td>
					</tr>
				</table>
				<p>&nbsp;</p>
				<div class="cleaner"></div>
			</div>
			<div class="div2">
				<h2>Nos Pizzas</h2>
				<img src="images/nospizzasfront.jpg" class="class3">
				<p class="pclass">
					Notre devise, « Les meilleurs pizzas, tout spécialement pour vous », est au coeur de toutes nos initiatives. 
					C'est là notre gage de qualité, au niveau du service, du produit et de l'environnement, et la garantie de 
					fraîcheur des ingrédients offerte au client.
				</p>
				<h2>La Piscine</h2>
				<p id="id_1">
					<a href="piscine.html"><img src="images/piscineart2.jpg"></a> 
					<a href="piscine.html"><img src="images/piscineart.png"></a>
				</p>
				<h6>Profitez de la piscine et d'une ambiance sans égale au Club House Haramous!</h6>
				<h6><img src="images/menuimages/cliquez.gif"></h6>
			</div>
		</div>
	</div>
	<div id="container">
		<div id="footer">
			Copyright © 2012 PIZZAIOLO Djibouti | Tous droits réservés | Powered by Ahmed Ibrahim
		</div>
	</div>
</body>
</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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
body{
	background-color: #AA0000;
	margin: 0px;
	padding: 0px;
}
header{
	background-color: rgb(109, 1, 1);
	width: 100%;
	text-align: center;
	height: 70px;
	padding-top: 15px;
}
header p{
	font-family: "Times New Roman";
	font-style: italic;
	color: #FFFFFF;
	margin-top: 0px;
	font-size: 11px;
}
.wrapper{
	margin: 0 auto;
	width: 960px;
	margin-top: 30px;
}
ul{
    margin: 0px;
    padding: 0px;
	list-style-type: none;
	position: relative;
	z-index: 1;
}
ul li{
    float: left;
    width: 192px;
    height: 40px;
	background-color: rgb(245, 9, 9);
	opacity: .8,5;
    line-height: 40px;
    text-align: center;
	font-size: 16px;
}
ul li a{
    text-decoration: none;
    color: white;
    display: block;
}
.submenu a{
    color: black;
    background-color: greenyellow;
}
.submenu a:hover{
    background-color: black;
    color: white;
}
.menu:hover{
    color: yellow;
}
ul li ul li{
	visibility: hidden;
}
ul li:hover ul li{
	visibility: visible;
	opacity: .8;
}
.d1{
	width: 960px;
	height: 360px;
	margin: 40px auto 3px;
	background-size: contain;
	animation: fondu 10s ease-in-out infinite both;
}
.conteneur{
	max-width: 960px;
	margin: 0px;
}
@keyframes fondu{
	0%{
		background-image: url(../images/diapo/1.jpg);
	}
	25%{
		background-image: url(../images/diapo/2.jpg);
	}
	50%{
		background-image: url(../images/diapo/3.jpg);
	}
	75%{
		background-image: url(../images/diapo/4.jpg);
	}
	100%{
		background-image: url(../images/diapo/1.jpg);
	}
}
.d1:hover, .d2:hover{
	animation-play-state: paused;
}
#main {
	padding: 30px 22px;
	background-color: #FFFFFF;
	background-image: none;
	background-repeat: repeat-y;
	background-position: center;
	margin-bottom: 40px;
	height: 1670px;
}
#main h2{
	padding: 10px;
	margin: 0 0 25px;
}
.image{
	float: left;
	width: 200px;
	margin-right: 20px;
}
.image img{
	width: 203px;
	height: 128px;
}
.style_h3{
	font-size: 13px;
	font-weight: bold;
	margin: 0 0 10px;
}
p{
	display: block;
	margin-block-start: 16px;
	margin-block-end: 16px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-size: 12px;
	margin: 0 0 10px 0;
	padding: 0;
}
.div1{
	width: 430px;
	height: auto;
	float: left;
	padding-right: 30px;
}
.class1{
	width: 142px;
	height: 139px;
}
.class2{
	width: 140px;
	height: 139px;
}
.td_class{
	width: 132px;
	text-align: center;
}
.td_class a{
	font-size: 12px;
	text-decoration: none;
}
#td_id{
	width: 142px;
	text-align: center;
}
#td_id a{
	font-size: 12px;
	text-decoration: none;
}
.cleaner{
	clear: both;
	height: 20px;
}
.div2{
	width: 430px;
	height: auto;
	padding-right: 30px;
	float: right;
}
.class3{
	width: 410px;
	height: 200px;
}
.pclass{
	text-align: justify;
	font-size: 13px;
}
#id_1 a:nth-child(2) img{
	width: 50px; 
	height: 50px;
}
.div2 h6{
	text-align: center;
	font-weight: bold;
	font-size: 10px;
}
.div2 h6 img{
	width: 70px;
	height: 50px;
}
#container {
	width: 100%;
	border-top: 1px solid #494949;
	background-color: #880000;
}
#footer {
	width: 960px;
	margin: 0 auto;
	padding: 15px 10px;
	color: #666;
	text-align: center;
	background-color: #880000;
}
bloc