مشروع css and html

يعطيك العافية 

عندي مشكلة بمشروعي..ماعم افهم المشاكل يلي بتواجهني ....اهم شي طريقة كتابة الكود

أولا أريد زيادة طول الborder-top في ال Hover   " لا اريد زيادة السماكة فقط الطول "

  <header>

        <div class="titre">

            <div class="premier-titre">

                <img src="image/Booki.png" alt="logo">

            </div>

            <div class="deuxieme-titre">

                <ul>

                    <li><a href="#hebergement">Hébergement</a></li>

                    <li><a href="#activités">Activités</a></li>

                </ul>

            </div>

        </div>

    </header>

.titre {

  display: flex;

  justify-content: space-between;

}



.titre .premier-titre {

  display: flex;

  justify-content: flex-start;

  padding: 40px 0px 50px 20px;

}



.titre .premier-titre img {

  width: 110px;

  height: 50px;

}



.titre .deuxieme-titre {

  display: flex;

  justify-content: flex-end;

}



.titre .deuxieme-titre ul {

  padding-top: 40px;

}



.titre .deuxieme-titre ul li {

  list-style-type: none;

  display: inline-block;

  padding-left: 60px;

}



.titre .deuxieme-titre ul li a:hover {

  padding-top: 35px;

  border-top: 1px solid #0065fc;



  color: #0065fc;

}

الجزء الثاني عبارة عن ثلاث اجزاء صغيرة

جزء الformule recherche  اريد جعل لونه متناسقا مع الايقون وكل مربع البحث 

  <!--localisation-->

        <div class="localisation">

            <div class="icon">

                <i class="fa-solid fa-location-dot"></i>

            </div>

            <input type="text" id="text" placeholder="Marseille,France">

            <input type="submit" value="Rechercher">

        </div>

.localisation {

  margin-top: 25px;

  margin-left: 40px;

  position: relative;

  border-color: #eee;

  height: 56px;

}



.localisation .icon {

  border-top-left-radius: 15px;

  border-bottom-left-radius: 15px;

  background-color: #f2f2f2;

  color: white;

  padding: 18px 25px 21px 21px;

  color: black;

  position: absolute;

  left: -50px;

}



.localisation input[type="text"] {

  padding: 17px;

  font-size: 17px;

  position: absolute;

  left: 6px;

}



.localisation input::placeholder {

  color: black;

  font-size: 20px;

  font-weight: bold;

}



.localisation input[type="submit"] {

  background-color: #0065fc;

  color: white;

  font-size: 15px;

  padding: 16px 41px 20px 20px;

  border-top-right-radius: 15px;

  border-bottom-right-radius: 15px;



  /* position left parceque si je veux utiliser width pour (buttuon resarch ), il

     commence à droit et il entre sur marseille*/

  position: absolute;

  left: 249px;

}

  <div class="infos">

            <i class="info fa-solid fa-info"></i>

            <p>Plus de 500 logements sont disponible dans cette ville.

            </p>

        </div>

الجزء الصغير هنا اريد الايقون بجانب الجملة الايقون يظهر منخفض عن الجملة

.infos {

  margin-right: 15px;



margin-top: 45px;

display:flex;

}

  border: 1px solid grey;

  border-radius: 50%;

  color: #0065fc;

  text-align: center;

  padding: 5px;

  margin-right: 15px;

}

هنا المشكلة ال flexbox لايعمل اريد ترتيب العنصرين hebergement and aside in flexbox و اريد ايضا ترتيب العناصر بداخلهما ب flexbox 

<main>

        <section id="hebergement ">

            <div class="hebergement">

                <h2>Hébergements à Marseille</h2>

                <div class="tous-proposition">

                    <a href="#">

                        <div class="proposition">

                            <figure>

                                <img src="image/auberge.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Hôtel du port</h3>

                                <p>Nuit à partir de 25<strong>€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>




                        <div class="proposition">

                            <figure>

                                <img src="image/hotel-port.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Hôtel du port</h3>

                                <p>Nuit à partir de 52<strong>€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>



                        <div class="proposition">

                            <figure>

                                <img src="image/hotel-mouettes.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Hôtel les mouettes</h3>

                                <p>Nuit à partir de <strong>76€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>



                        <div class="proposition">

                            <figure>

                                <img src="image/Hotel-de-lamer.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Hôtel de la mer</h3>

                                <p>Nuit à partir de 46<strong>€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>



                        <div class="proposition">

                            <figure>

                                <img src="image/Auberge-panier.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Auberg Le panier</h3>

                                <p>Nuit à partir de <strong>23€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>



                        <div class="proposition">

                            <figure>

                                <img src="image/hotel-amina.jpg" width="150px" alt="chambre-hotel">

                            </figure>

                            <div class="groupe-elements">

                                <h3>Hôtel chez Amina</h3>

                                <p>Nuit à partir de 96<strong>€</strong></p>

                                <div class="photostars">

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star"></i>

                                    <i class="fa-solid fa-star" style="color: #eee;"></i>

                                </div>

                            </div>

                        </div>

                </div>

                </a>



                <div class="fin-proposition">

                    <a href="#">Afficher Plus</a>

                </div>



            </div>



        </section>



        <aside>

            <h2> Les plus populaires</h2>

            <i class="icon-po fas fa-chart-line"></i>

            <div class="proposi">

                <img src="image/1.jpg" alt="chambre-hotel">

                <div class="groupe-elements">

                    <h3>Hôtel Le soleil du matin</h3>

                    <p>Nuit à partir de 128<strong> € </strong></p>

                    <div class="stars">

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                    </div>

                </div>

            </div>



            <div class="proposi">

                <img src="image/2.jpg" alt="chambre-hotel">

                <div class="groupe-elements">

                    <h3>Au coeur de l'eau</h3>

                    <p>Nuit à partir de 71<strong> € </strong></p>

                    <div class="stars">

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star" style="color: #eee;"></i>

                    </div>

                </div>

            </div>



            <div class="proposi">

                <img src="image/Hôtel-Blanc.jpg" alt="chambre-hotel">

                <div class="groupe-elements">

                    <h3>Hôtel Tout bleu et Blanc</h3>



                    <p>Nuit à partir de 68 <strong>€</strong></p>

                    <div class="stars">

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star"></i>

                        <i class="fa-solid fa-star" style="color: #eee;"></i>

                    </div>

                </div>

            </div>

        </aside>

    </main>

main {

  display: flex;

  flex-wrap: wrap;

  margin-top: 40px;

}



main section .hebergement {

  width: 70%;

  border: 1px solid silver;

  border-radius: 15px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}



.hebergement .tous-proposition {

  display: flex;

  justify-content: space-around;

}



main section .hebergement .proposition {

  border: 1px solid silver;

}



.hebergement .fin-proposition {

  margin-left: 65px;

  margin-top: 18px;

  margin-bottom: 32px;

  font-weight: bold;

}



.hebergement a {

  text-decoration: none;

}



.hebergement .fin-proposition a {

  color: black;

  text-decoration: none;

}



/*----------------plus populaire-------------------------*/



main aside {

  width: 30%;

  border: 1px solid silver;

}



aside {

  padding: 20px 35px 30px 20px;

  border-radius: 15px;

  background-color: #dbdbd7;

  margin-top: 25px;

  margin-right: 50px;

}



aside h2 {

  padding-bottom: 2px;

}



aside .icone-po {

  display: flex;

}



aside .proposi {

  border: 1px solid silver;

  border-radius: 15px;

  background-color: white;

  margin-bottom: 54px;

  display: flex;

  justify-content: flex-start;

}



aside .proposi img {

  width: 120px;

  height: 120px;

  border-top-left-radius: 15px;

  border-bottom-left-radius: 15px;

  background-color: white;

  padding: 5px;

}



aside .proposi .groupe-elements {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  padding-left: 10px;

  padding-top: 10px;

}



aside .proposi .groupe-elements .stars {

  padding-top: 35px;

  color: #0065fc;

}

شكرا جزيلا