使图像锁定，使其不会相对于其他对象html移动

Question

好的，所以我在我的html网站上工作，我在屏幕中间有一个图像。但是我想在右边的文本旁边。但每当我尝试添加文字时，图像就会向下移动。它非常烦人，我不知道该怎么做。

这是一张显示我想要的照片。 https://imgur.com/a/THV9q

如你所见。在左边的图像上，这就是我想要的。

滑块是图片的幻灯片。我要添加的文字应该在＆＃34;我做什么＆＃34;块。

目前的代码。

＆＃13;

＆＃13;

.slider {
  width: 1024px;
  margin: 2em auto;
  float:left;
  padding-left: 10%;
}

.slider-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper > .slide:first-child {
  opacity: 1;
}

＆＃13;

<section id="main">
      <div class="container">
        <article id="main-col">
          <h1 class="page-title">About Me</h1>
          <p class="dark">
            My name is x and i am 19 years old. I was born in Gothenburg and live in a civilised neighborhood called Torslanda.
          </p>
          <p class="dark">
            My current focus with my studies but also with my knowledge is to get a sustificated job where i can make a whealty living of it. I have always strived to make the
            day to day life in the ordinary persons life easier! How do i do this? <br><br>
            To focus my attention to Artificiall Intelligence (Voice recognition etc..) and expanding my knowledge
            around automatic programming. If this subject caught your attention i would recommend to browse over to "OpenAI" youtube channel founded by Elon Musk and many others.
          </p>
        </article>
        <aside id="sidebar">
          <div class="dark">
            <h3>What I Do</h3>
            <p>As listed in the home page section. I work within <br></br> C# <br> </br> LUA <br></br> HTML & CSS <br></br> SQL</p>
          </div>
        </aside>
      </div>
    </section>

    <div class="slider" id="main-slider"><!-- outermost container element -->
    	<div class="slider-wrapper"><!-- innermost wrapper element -->
    		<img src="./img/hem.jpg" alt="First" class="slide" /><!-- slides -->
    		<img src="./img/torslanda.png" alt="Second" class="slide" />
    		<img src="./img/DSC_0032.JPG" alt="Third" class="slide" />
        <img src="./img/hem2.JPG" alt="Third" class="slide" />
    	</div>
    </div>

＆＃13;

＆＃13;

＆＃13;