好的，所以我在我的html网站上工作，我在屏幕中间有一个图像。但是我想在右边的文本旁边。但每当我尝试添加文字时，图像就会向下移动。它非常烦人，我不知道该怎么做。
这是一张图片，显示我想要的方式。 https://imgur.com/a/THV9q
如你看到的。在左边的图像上，这就是我想要的。
滑块是图片的幻灯片。我要添加的文字应该在“我做什么”块下。
目前的代码到目前为止
.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;
}<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>你在</br>中打破了标记，br标签不需要关闭。我建议您对HTML进行一些修改。适当地关闭所有标记，并将主要部分和侧边栏分成两部分。侧栏位于<aside>标签中，而主要位于其<section>容器中。这将为您提供添加文本的空间。我们还需要在滑块上重写css。宽度，边距和填充。
/*use the body to layout the grid.*/
body {
display: grid;
/*fr is units for the remaning space available. So you appropriate as you wish. The children items will automatically take up the space in the tracks created*/
grid-template-columns: 8fr 4fr;
grid-gap: 20px;
}
.dark {
background: #444;
color: #999;
}
#sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.slider {
width: 100%;
margin: 2em auto;
}
.slider-wrapper {
width: 100%;
min-height: 300px;
position: relative;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s linear;
}
.slider-wrapper > .slide:first-child {
opacity: 1;
}<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?</p>
<p>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>
<div class="slider" id="main-slider"><!-- outermost container element -->
<div class="slider-wrapper"><!-- innermost wrapper element -->
<img src="https://images.unsplash.com/photo-1515902966800-95fac3b01698?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c290798a28302ab8b78755d7b7ba5cf8" alt="First" class="slide" /><!-- slides -->
<img src="https://images.unsplash.com/photo-1516450494832-d1ba9fc12c74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c42a522a890b5bd969ca225f7335f3eb" alt="Second" class="slide" />
<img src="https://images.unsplash.com/photo-1506463765200-fc62eebf76e5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f44c618107bc1ea92a6116180d6ef698" alt="Third" class="slide" />
<img src="https://images.unsplash.com/photo-1506623688006-bfa92504db12?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=90487cec51ba855349c6f1e104e6ed68" alt="Third" class="slide" />
</div>
</div>
</article>
</div>
</section>
<aside id="sidebar">
<div class="dark">
<h3>What I Do</h3>
<!-- Please use ul or ol for lists.-->
<p>As listed in the home page section. I work within: </p>
<ul>
<li>C#</li>
<li>LUA</li>
<li>HTML & CSS</li>
<li>SQL</li>
</ul>
</div>
<div>
<h3>More content here. </h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate itaque amet aut quam porro culpa architecto aperiam! Consectetur voluptas sapiente aut, enim asperiores velit, soluta quidem rem culpa error mollitia.</p>
</div>
</aside>