شبیه سازی قسمت کوچکی از سون لرن با خصوصیت float

سلام استاد وقتتون بخیر

من سعی کردم قسمتی از سایت اکادمی رو با توجه به خصوصیت فلوت که گفتین بسازم

ممنون میشم ازتون که اشکالات کد ام رو بهم بگید

و یک سوالی هم که داشتم اینه که تو استایل اولی که نوشتم امکان این بود که به صورت زوج و فرد استایل میدادم ؟

مثلا زوج‌ها فلوت رایت بگیرن و فرد‌ها فلوته چپ ؟ و اگر جواب مثبت هست به چه صورتی انجام میشه ؟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" /> 
   <!-- <link rel="stylesheet" href="style2.css" /> -->
    <title>Mini Project</title>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img id="first" src="https://7learn.ac/assets/student/img/teacher.svg" alt="" />
      </div>
      <div class="desc">
        <h2>صرفه جویی در زمان، با تدریس اساتید مجرب</h2>
        <p>
          مدرسین اکادمی سون لرن، همگی افرادی هستند که تجربه کاری در بزرگترین
          شرکت‌های حوزه فناوری ایران همانند دیجی کالا، نت برگ، پارسپک و ... را
          دارند و می‌توانند با انتقال تجربه‌های ارزشمندشان، در زمان شما صرفه
          جویی کنند!
        </p>
      </div>
      <div class="image">
        <img id="second" src="https://7learn.ac/assets/student/img/updates.svg" alt="" />
      </div>
      <div class="desc">
        <h2>آپدیت‌های همیشگی</h2>
        <p>در صورتی که در دوره‌های متخصص به صورت کامل ثبت نام نمایید، آپدیت‌های همیشگی این دوره‌ها را به رایگان دریافت خواهید کرد.
        </p>
      </div>
      <div class="image">
        <img id="third" src="https://7learn.ac/assets/student/img/updates.svg" alt="" />
      </div>
      <div class="desc">
        <h2>حفظ تعامل با برگزاری وبینارهای ماهانه</h2>
        <p>در دوره‌های متخصص هر ماه یک وبینار زنده برای تعامل و پرسش و پاسخ با مدرسین خواهید داشت و می‌توانید سوالات خود را مستقیما از مدرس بپرسید و پاسخ بگیرید..
        </p>
      </div>
      <div class="image">
        <img id="forth" src="https://7learn.ac/assets/student/img/webinar.svg" alt="" />
      </div>
      <div class="desc">
        <h2>معرفی به بازار کار پس از دریافت تائیدیه فنی</h2>
        <p>در دوره‌های متخصص هر ماه یک وبینار زنده برای تعامل و پرسش و پاسخ با مدرسین خواهید داشت و می‌توانید سوالات خود را مستقیما از مدرس بپرسید و پاسخ بگیرید..
        </p>
      </div>
    </div>
  </body>
</html>

این هم فایل استایل

@font-face{
  font-family: sahel;
  src: url("Sahel.woff") format("woff");
}
body{
  font-family: sahel;
  direction: rtl;
  background-color: #f6f9fb;
}
.container{
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  box-shadow: 1px 1px 10px #efefef, -1px -1px 10px #efefef;; 
}
#first{
  float: right;
  width: 35%;
  margin: 30px;
}
#second{
  float: left;
  width: 35%;
  margin: 30px; 
}
#third{
  float: right;
  width: 35%;
  margin: 30px;
}
#forth{
  float: left;
  width: 35%;
  margin: 30px;
}
div.desc{
  margin-bottom: 60px;
}
.desc h2,p{
  padding-top: 14px;  
}
.desc p{
  width: 80%;
  padding-bottom: 120px;
  padding-right: 31px;
}
.desc h2{
  padding-top: 50px;
  padding-right: 15px;
}

اینم یه استایل دیگه که همینطوری زدم برای تمرین

@font-face{
  font-family: sahel;
  src: url("Sahel.woff") format("woff");
}
body{
  font-family: sahel;
  direction: rtl;
  background-color: #f6f9fb;
}
.container{
  margin-left: 300px;
  margin-right: 300px;
  box-shadow: 1px 1px 10px #efefef, -1px -1px 10px #efefef;
}
.image img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
.desc{
  text-align: center;
}
.desc p{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.desc h2,p{
  margin-bottom: 25px;
}