adding flexbox

css/style.css

@@ -5,6 +5,7 @@ html {
 body {
   	background-color: #121212;
 	font-family: Arial, sans-serif;
+	
 }
 
 h1 {
@@ -20,44 +21,55 @@ h1 {
 }
 
 .main_container {
+	display: flex;
+	flex-direction: row;
+	/*border: 0.5px solid rgb(208, 160, 236);*/
+}
+
+.text_container {
 	position: relative; 
-  	width: 99%;
+  	width: 90%;
   	min-height: 70%;
 	margin: 20px;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	/*border: 0.5px solid rgb(206, 138, 138);*/
+}
+
+.img_container {
+	margin: 20px;
+	min-height: 40%;
+	/*border: 0.5px solid rgb(138, 206, 186);*/
 }
 
 .main_text {
-	position: absolute;
-  	top: 50px;
-  	left: 20%;
-  	transform: translate(-50%, -50%);
+	order: 1;
+	padding: 15px;
+	margin: 20px;
 	text-align: left;
 	border: 0.5px solid white;
 	border-radius: 0px;
-	padding: 15px;
-	margin: 20px;
 	color: white;
+	align-self: flex-start;
 }
 
 .main_img {
-	position: absolute;
-  	top: 50px; 
-  	left: 68%;
-	width: 25%;
+	position: static;
+	width: 50%;
   	height: auto;
 	border-radius: 70%;
 	object-fit: cover;
 }
 
 .contacts {
-	position: absolute;
-  	top: 250px; 
-  	left: 17.5%;
-  	transform: translate(-50%, -50%);
+	order: 2;
+	padding: 15px;
+	margin: 20px;
 	text-align: left;
 	border: 0.5px solid white;
 	border-radius: 0px;
-	padding: 15px;
-	margin: 20px;
+	align-self: flex-start;
 	color: white;
 }

index.html

@@ -18,22 +18,25 @@
 		<b><i>This site is work in progress</i></b>
 	</div>
 	<div class="main_container">
-		<div class="main_text">
-			<p>I'm BaumSplitter41, I'm am an IT student from germany.</p>
-			<p>This is my little personal website.</p>
+		<div class="text_container">
+			<div class="main_text">
+				<p>I'm BaumSplitter41, I'm am an IT student from germany.</p>
+				<p>This is my little personal website.</p>
+			</div>
+
+			<div class="contacts">
+				<h2>Contact</h2>
+				<p> You can contact me via the following channels:</p>
+				<p>Email: baumsplitter41@baumsplitter41.eu</p>
+				<p>Matrix: @baumsplitter41:baumsplitter41.eu</p>
+				<p>Discord: baumsplitter41</p>
+				<p> <a href="https://github.com/baumsplitter41"> Github</a></p>
+			</div>
 		</div>
 
-		<div class="contacts">
-			<h2>Contact</h2>
-			<p> You can contact me via the following channels:</p>
-			<p>Email: baumsplitter41@baumsplitter41.eu</p>
-			<p>Matrix: @baumsplitter41:baumsplitter41.eu</p>
-			<p>Discord: baumsplitter41</p>
-			<p> <a href="https://github.com/baumsplitter41"> Github</a></p>
+		<div class="img_container">
+			<img src="/assets/Logo_BaumSplitter41.png" alt="Logo BaumSplitter41", class = "main_img">
 		</div>
-
-
-		<img src="/assets/Logo_BaumSplitter41.png" alt="Logo BaumSplitter41", class = "main_img">
 	</div>