如何实现HTML中div.home与div.main-home-img横向对齐？

我有两个div元素，一个是包含文本内容的.Home，另一个是包含图片的.main-home-img，目前它们无法横向并排显示，当前效果如下：

以下是我的HTML和CSS代码，请问如何调整让它们对齐并排？

.small-text-1,
.small-text-2 {
  font-size: 70px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.main-text {
  display: inline-block;
  margin-top: 15vh;
  margin-left: 8vw;
}

.para-text-1 {
  display: inline-block;
  margin-left: 8vw;
  margin-top: 3.5vh;
}

.para-text-1 p span {
  font-weight: 700;
}

.para-text-1 p {
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  line-height: 3.5vh;
}

.btn-home-text {
  display: inline-block;
  margin-left: 8vw;
  margin-top: 5vh;
}

.btn-home-text button {
  width: 7vw;
  height: 5.5vh;
  color: #ffff;
  background-color: #ff3c00;
  font-size: 16px;
  border: none;
  font-family: 'Ubuntu', sans-serif;
}

.blank-text {
  display: inline-block;
}

.Blank-text {
  display: inline-block;
  margin-left: 2vw;
}

.Blank-text p {
  font-size: 18px;
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
}

.arrow-home-img img {
  width: 40px;
  height: 40px;
  display: inline;
}

.arrow-home-img {
  margin-top: 1vh;
  margin-left: 0vw;
  display: inline-block;
}

.Works-text-home-1 {
  display: inline-block;
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  margin-top: 4.5vh;
  margin-left: 8vw;
}

.Works-text-home-2 {
  display: inline-block;
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  margin-top: 3vh;
  margin-left: 8vw;
}

.Works-text-home-2 h2,
p {
  display: inline-block;
}

.Works-text-home-3 {
  font-family: 'Ubuntu', sans-serif;
  display: inline-block;
  margin-left: 5vw;
}

.Works-text-home-3 h2 {
  display: inline-block;
}

.main-home-img img {
  height: 100vh;
  width: 20vw;
}

.main-home-img {
  margin-left: 79.8vw;
  display: inline-block;
}

<div class="Home">
  <div class="main-text">
    <span class="small-text-1">Hi! I Am</span>
    <br>
    <span class="small-text-2">Ashman Singh</span>
  </div>
  <br>
  <div class="para-text-1">
    <p>Designing user interfaces for over <span>7 years</span> <br> as a developer</p>
  </div>
  <br>
  <div class="btn-home-text">
    <button>Hire Me</button>
  </div>

  <div class="Blank-text">
    <p>
      Projects
    </p>
  </div>

  <div class="arrow-home-img">
    <img src="/Images/up-arrow.png" alt="">
  </div>

  <!-- <div class="img-text-logo-home">
            <img src="/Images/code.png" alt="">
        </div> -->
  <br>
  <div class="Works-text-home-1">
    <h2>84+</h2>
    <p>Clients on work <br> worldwide</p>
  </div>
  <br>
  <div class="Works-text-home-2">
    <h2>572</h2>
    <br>
    <p>Projects done</p>
  </div>

  <div class="Works-text-home-3">
    <h2>Contact</h2>
    <br>
    <p>shivanisomghignou@gmail.com</p>
  </div>

</div>
<div class="main-home-img">
  <img src="/Images/ludovic-migneault-4uj3iZ5m084-unsplash.jpg" alt="">
</div>

修复方案 #

核心思路

用Flex布局实现横向排列，同时修正图片容器的过度偏移问题：

1. 给两个div添加父容器，通过Flex属性控制子元素排列方式
2. 移除图片容器的极端左外边距，调整宽度避免挤压文本
3. 让文本容器自适应剩余空间，保证布局合理

修改后的代码

HTML代码

<div class="home-container">
  <div class="Home">
    <div class="main-text">
      <span class="small-text-1">Hi! I Am</span>
      <br>
      <span class="small-text-2">Ashman Singh</span>
    </div>
    <br>
    <div class="para-text-1">
      <p>Designing user interfaces for over <span>7 years</span> <br> as a developer</p>
    </div>
    <br>
    <div class="btn-home-text">
      <button>Hire Me</button>
    </div>

    <div class="Blank-text">
      <p>
        Projects
      </p>
    </div>

    <div class="arrow-home-img">
      <img src="/Images/up-arrow.png" alt="">
    </div>

    <!-- <div class="img-text-logo-home">
              <img src="/Images/code.png" alt="">
          </div> -->
    <br>
    <div class="Works-text-home-1">
      <h2>84+</h2>
      <p>Clients on work <br> worldwide</p>
    </div>
    <br>
    <div class="Works-text-home-2">
      <h2>572</h2>
      <br>
      <p>Projects done</p>
    </div>

    <div class="Works-text-home-3">
      <h2>Contact</h2>
      <br>
      <p>shivanisomghignou@gmail.com</p>
    </div>

  </div>
  <div class="main-home-img">
    <img src="/Images/ludovic-migneault-4uj3iZ5m084-unsplash.jpg" alt="">
  </div>
</div>

CSS代码（新增+修改部分）

/* 新增父容器Flex布局 */
.home-container {
  display: flex;
  align-items: center; /* 文本与图片垂直居中对齐，可改为flex-start实现顶部对齐 */
  width: 100%;
}

/* 修改文本容器，自适应剩余空间 */
.Home {
  flex: 1;
}

/* 修改图片容器样式 */
.main-home-img {
  margin-left: 2vw; /* 文本与图片间添加间距 */
  display: inline-block;
}

.main-home-img img {
  height: 100vh;
  width: auto; /* 保持图片比例，避免拉伸变形 */
  max-width: 30vw; /* 限制图片最大宽度，防止挤压文本 */
}

/* 保留原有其他样式 */
.small-text-1,
.small-text-2 {
  font-size: 70px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.main-text {
  display: inline-block;
  margin-top: 15vh;
  margin-left: 8vw;
}

.para-text-1 {
  display: inline-block;
  margin-left: 8vw;
  margin-top: 3.5vh;
}

.para-text-1 p span {
  font-weight: 700;
}

.para-text-1 p {
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  line-height: 3.5vh;
}

.btn-home-text {
  display: inline-block;
  margin-left: 8vw;
  margin-top: 5vh;
}

.btn-home-text button {
  width: 7vw;
  height: 5.5vh;
  color: #ffff;
  background-color: #ff3c00;
  font-size: 16px;
  border: none;
  font-family: 'Ubuntu', sans-serif;
}

.blank-text {
  display: inline-block;
}

.Blank-text {
  display: inline-block;
  margin-left: 2vw;
}

.Blank-text p {
  font-size: 18px;
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
}

.arrow-home-img img {
  width: 40px;
  height: 40px;
  display: inline;
}

.arrow-home-img {
  margin-top: 1vh;
  margin-left: 0vw;
  display: inline-block;
}

.Works-text-home-1 {
  display: inline-block;
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  margin-top: 4.5vh;
  margin-left: 8vw;
}

.Works-text-home-2 {
  display: inline-block;
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  margin-top: 3vh;
  margin-left: 8vw;
}

.Works-text-home-2 h2,
p {
  display: inline-block;
}

.Works-text-home-3 {
  font-family: 'Ubuntu', sans-serif;
  display: inline-block;
  margin-left: 5vw;
}

.Works-text-home-3 h2 {
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者Ashman Singh