Can't make valid responsive website because positioning - html

Question

I try to make a responsive website but I tend to believe because I'm using positiong + right and left it makes me some serious problems. I need to do that without grid.
That's what happens when I make the window a little bit smaller, some of it go left: https://i.imagesup.co/images2/cdf13e4d1939b4041c55ab3b59799762e3d8f32d.png.
And when it gets to the media query it's definitely not responsive. Every change in the window size under 786px seem differently.
https://i.imagesup.co/images2/007f47c1df59bdf745a531d55c9c8965270508aa.png
Only the what inside the first white box + what's inside + what above is really responsive.
CSS
body {
margin: auto 0;
direction: rtl;
background-color:#F0F0F0;
}
.img-center {
display: block;
margin: 0 auto;
}
#img-below {
border: 5px solid white;
border-radius: 100%;
height: 8%;
width: 8%;
position: relative;
bottom: 80px;
}
h1 {
color:#0099ff;
text-align: center;
position: relative;
bottom: 120px;
font-size: 50px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
h2 {
color: gray;
font-size: 30px;
text-align: center;
font-size: 30px;
position: relative;
bottom: 157px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.icons {
height: 50px;
width: 50px;
border: #0099ff 5px solid;
padding: 5px;
border-radius: 100%;;
margin-right: 15px;
}
#DivIcons {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 170px;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 15px;
}
article {
width: 160px;
margin-bottom: 5px;
position: relative;
bottom: 455px;
right: 397px;
}
h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.square {
border:5px solid #0099ff;
height: 80px;
width: 80px;
margin-left: 20px;
border-radius: 30%;
}
.circle {
border:5px solid #0099ff;
border-radius: 100%;
height: 80px;
width: 80px;
margin-left: 20px;
}
.Pservice {
color: #0099ff;
text-align: center;
position: relative;
top: 12px;
}
#service {
display: flex;
flex-direction: row;
position: relative;
bottom: 1710px;
right: 440px;
}
#position3 {
position: relative;
bottom: 70px;
right: 157px;
}
#form {
position: relative;
bottom: 1830px;
right: 593px;
}
input {
border-radius: 6px;
}
input:nth-child(1)
{
width: 250px;
height: 20px;
margin-left: 10px;
}
input:nth-child(2)
{
width: 250px;
height: 20px;
}
#textarea {
width: 520px;
height: 250px;
margin-bottom: 10px;
}
#submit {
background-color: #0099ff;
color: white;
height: 50px;
width: 120px;
position: relative;
right: 200px;
bottom: 10px;
cursor: pointer;
}
#FirstWhite{
width: 750px;
height: 320px;
background-color: white;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 180px;
height: 650px;
background-color: white;
position: relative;
bottom: 1113px;
right: 385px;
z-index: -1;
}
#ServiceWhite {
width: 555px;
height: 165px;
background-color: white;
z-index: -1;
position: relative;
bottom: 1855px;
right: 580px;
}
#FooterWhite {
width: 555px;
height: 463px;
background-color: white;
z-index: -1;
position: relative;
bottom: 2292px;
right: 580px;
}
#media screen and (max-width:768px)
{
#img-main {
width: 100vw;
height: 150px;
}
#img-below {
width: 30vw;
height: 30vh;
margin-bottom: 10px;
}
h1, h2 {
font-size: 7vw;
position: relative;
bottom: 100px;
margin: 0 auto;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#flex-mobile1 {
display: flex;
flex-direction: row;
position: relative;
top: 70px;
right: 120px;
margin-top: 10px;
}
#flex-mobile2 {
display: flex;
flex-direction: row;
position: relative;
top: 150px;
left: 133px;
margin-top: 10px;
}
#FirstWhite{
width: 100vw;
height: 500px;
background-color: white;
display: block;
margin: 0 auto;
position: relative;
bottom: 490px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 100vw;
height: 300px;
background-color: white;
position: relative;
right: 0px;
bottom: 588px;
}
article {
position: relative;
right: 0px;
width: 85vw;
margin-right: 10px;
height: 100px;
}
#ServiceWhite
{
position: relative;
bottom: 650px;
right: 0px;
width: 100vw;
}
#service
{
position: relative;
bottom: 500px;
right: -120px;
}
#FooterWhite
{
position: relative;
bottom: 1080px;
right: 0px;
width: 100vw;
}
#form {
position: relative;
right: 0px;
bottom: 620px;
margin-right: 15px;
}
#inside-form {
position: relative;
right: 40px;
}
}
Link to Codepen

Answer 1

Hope this code helps you to build on top it. As of now the media query is set for 600px, you may change it to your desired break point.
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: auto;
}
header {
position: relative;
}
.header-img {
width: 100%;
}
.rounded-img {
position: absolute;
height: 140px;
width: 140px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
left: 50%;
transform: translate(-50%);
bottom: -60px;
}
.rounded-img img {
width: 100%;
height: 100%;
}
h1,
h2 {
font-family: "M PLUS Rounded 1c", sans-serif;
text-align: center;
}
.titles {
background-color: #fff;
padding-bottom: 40px;
}
h1 {
color: #0099ff;
font-size: 5rem;
padding: 60px 20px 0 20px;
}
h2 {
color: #808080;
font-size: 2.4rem;
}
.icons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.icons a {
width: 40px;
height: 40px;
overflow: hidden;
margin: 0 15px;
border: 5px solid #0099ff;
padding: 10px;
border-radius: 50%;
}
.icons a img {
width: 100%;
height: 100%;
}
.content-section {
display: flex;
margin: 20px 0;
}
.article-right,
.article-left {
font-size: 1.6rem;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.article-right {
order: 2;
width: 180px;
margin-left: auto;
text-align: right;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 20px;
}
.article-left div {
text-align: right;
width: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left .shapes-section {
margin-bottom: 30px;
}
.article-left .form-section {
margin-bottom: 50px;
}
#media screen and (max-width: 600px) {
.icons {
flex-wrap: wrap;
margin-top: 10px;
}
.icons a {
margin-top: 20px;
}
.content-section {
flex-direction: column;
}
.article-right,
.article-left,
.article-left .shapes-section,
.article-left .form-section {
text-align: center;
}
.article-left {
order: 2;
margin-right: 0;
}
.article-right {
margin-right: auto;
margin-bottom: 30px;
width: 100%;
}
}
<div class="container">
<header>
<img class="header-img" src="https://www.westsidemovement.com/wp-content/uploads/2018/03/Lets-Go-Scripture-800x200.jpg" alt="" />
<div class="rounded-img">
<img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frainerzitelmann%2Ffiles%2F2019%2F06%2FE0MG76-e1560965378507-1200x1270.jpg" alt="" />
</div>
</header>
<main>
<section class="titles">
<h1>אלברט איינשטיין</h1>
<h2>פיזיקאי תיאורטי</h2>
<div class="icons">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/10-waze-512.png" alt="" />
</a>
<a href="#">
<img src="https://thebrightwork.com/wp-content/uploads/2014/04/facebook-icon-blue.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/basic-thin-line-color/21/20-512.png" alt="" />
</a>
<a href="#">
<img src="https://www.trzcacak.rs/myfile/full/311-3111799_social-media-computer-icons-logo-blue-area-png.png" alt="" />
</a>
<a href="#">
<img src="https://img.icons8.com/ultraviolet/452/whatsapp.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/thin-line-color-1/21/13-512.png" alt="" />
</a>
</div>
</section>
<section class="content-section">
<article class="article-right">
your right content
</article>
<article class="article-left">
<div class="shapes-section">
shapes content here
</div>
<div class="form-section">
form here
</div>
</article>
</section>
</main>
</div>