Bonjour,

Je suis à la création du site de zozor dans le cours HTML/CSS. 

Dans le footer je voudrait mettre mes deux liste à puces côte à côte. 

Apres plusieurs recherche j'ai essayé display: inline; display: inlin-block; float:left mais rien n'y fait mes deux liste reste l'une en dessous de l'autre.

je comprends pas pourquoi elle ne se mette pas comme je veux, j'ai également essayé de réduire la taille que prend mes listes en pensant que c'était peut être une histoire de place pour le navigateur mais ca ne fait rien. je vous joint la partie footer du code en html et en css en espérant qu'une personne puisse m'aider.

Bonne journée à vous.

<footer>
			<div id="tweet">
				<h1>Mon dernier tweet!</h1>
				<p>Hiiiiiii Haaaann!!</p>
				<p>Le 12 mai 2021</p>
			</div>
			
			<div id="mes_photos">
				<h1>Mes photos</h1>
				<p>
				   <img src="images/photo1.jpg" alt="" id="Photographie1" />				
				   <img src="images/photo2.jpg" alt="" id="Photographie2" />
				   <img src="images/photo3.jpg" alt="" id="Photographie3" />
				   <img src="images/photo4.jpg" alt="" id="Photographie4" />
				</p>
			</div>

			<div id="mes_amis">
					<h1>Mes amis!</h1>
				<div id="liste_amis">
						<ul>
							<li>Pulpi le lapin</li>
							<li>Mr Baobab</li>
							<li>Kaiwaii</li>
							<li>Perceval.eu</li>
						</ul>
						<ul>
							<li>Belette</li>
							<li>Le concombre masqué</li>
							<li>Ptit prince</li>
							<li>Mr Fan</li>
						</ul>
					</div>
				</div>
			</footer>

/* Footer */
footer
{
	display: flex;
	flex: 3;
	background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png')
	 repeat-x top, url('images/ombre.png') repeat-x top;
	 padding-top: 25px;
}
footer p, footer url
{
	font-size: 0.9em;
}
footer h1
{
	font-size: 0.9em;
}
#tweet
{
	width: 25%;
}
#mes_photos
{
	width: 35%;
}
#mes_amis
{
	width: 40%;
}
#mes_photos img 
{
	border: 1px solid #181818;
	margin-right: 1.5px;
}
#listes_amis
{
	display: flex;
	justify-content: space-between;
	margin-top: 0;
}
#mes_amis ul
{
	list-style-image: url('images/ico_liensexterne.png');
	padding-left: 2px;
}
#mes_amis a 
{
	text-decoration: none;
	color: #760001;
}

Bonjour, tu ne cible pas le bon élément, dans ton html tu as id="liste_amis"  et dans ton CSS tu as comme sélecteur #listes_amis   

Donc pas de correspondance.

Un conseil pour tes futures développement, utilise uniquement des class pour le CSS et garde les identifiants pour les ancres et le JS. C'est une question de poids de sélecteur. 

Merci beaucoup faut vraiment que je fasse beaucoup plus attention à l'ortographe en reprenant mon selecteur.

Encore Merci de ton aide et merci pour le conseil et l'article.

Bonne continuations à toi.