HTML/CSS Responsive design - html

Question

I created a page with some buttons. All design is correct as is all positioning.
The problem of all is that it is not responsive.
I used some attributes like top, left and I think it hurt me in responsive design, but I may be wrong.
I wish that when reducing the window, the buttons would move (responsive design) automatically
Can anyone help me get everything responsive and in place?
CodePen
#inline-container img {
position: absolute;
display: block;
margin: 0px;
border: none;
padding: 0px;
}
#inline-container div {
position: absolute;
}
#inline-container {
display: block;
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden; }
#_bg__home___quadrado___6_colunas {
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
background:rgba(255,255,255,255);
}
.search_box {
top:16px;
left: 1384px;
width: 216px;
height: 32px;
background-color: #edf3f9;
opacity: 0.8;
border: none;
border-radius: 16px;
line-height: 20px;
color: black;
text-indent: 40px;
position: relative;
}
.Upload {
top: 16px;
left: 76px;
width: 135px;
height: 32px;
}
.It {
top: 24px;
left: 728px;
width: 88px;
height: 24px;
}
.Ta {
top: 24px;
left: 944px;
width: 92px;
height: 24px;
}
.No {
top: 24px;
left: 1052px;
width: 141px;
height: 24px;
}
.Ca {
top: 24px;
left: 832px;
width: 96px;
height: 24px;
}
.btn-c{
opacity: 1;
top: 24px;
left: 832px;
width: 96px;
height: 24px;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgb(250, 250, 251);
outline:none;
cursor: pointer;
}
.btn-c:active{
width: 96px;
height: 24px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgba(202,206,213,255);
opacity: 1;
}
.btn-n{
opacity: 1;
top: 24px;
left: 1052px;
width: 141px;
height: 24px;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgb(250, 250, 251);
outline:none;
cursor: pointer;
}
.btn-n:active{
width: 141px;
height: 24px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgba(202,206,213,255);
opacity: 1;
}
.btn-i{
opacity: 1;
top: 24px;
left: 728px;
width: 88px;
height: 24px;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgb(250, 250, 251);
outline:none;
cursor: pointer;
}
.btn-i:active{
width: 88px;
height: 24px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgba(202,206,213,255);
opacity: 1;
}
.btn-t{
opacity: 1;
top: 24px;
left: 944px;
width: 92px;
height: 24px;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgb(250, 250, 251);
outline:none;
cursor: pointer;
}
.btn-t:active{
width: 92px;
height: 24px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background: rgba(202,206,213,255);
opacity: 1;
}
.btn-upload{
top: 16px;
left: 76px;
width: 135px;
height: 32px;
cursor: pointer;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: 0px;
background-color: rgb(232, 238, 245);
outline:none;
font-family: Noto Sans;
font-size: 13px;
text-align: center;
color:#4d4f5c;
}
<div style="width: 100%;height: 100%;">
<div style="width: 100%; height: calc(100% - 64px);">
<div id="inline-container" >
<div id="_bg__home___quadrado___6_colunas" ></div>
<div>
<input type="text" class="search_box" placeholder="Search..."/>
</div>
<div class="Upload" >
<button class="btn-upload"> Upload Files</button>
</div>
<div class="It">
<button class="btn-i">Settings</button>
</div>
<div class="Ta">
<button class="btn-t">Settings</button>
</div>
<div class="No">
<button class="btn-n">Settings</button>
</div>
<div class="Ca">
<button class="btn-c">Settings</button>
</div>
</div>
</div>
</div>

Answer 1

Here's how I would write the markup and styles for this. You can use flex-box.
https://jsfiddle.net/sheriffderek/yao1wdgp/ (live example)
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.page-section {
border: 1px solid orange;
}
.page-section .inner-column {
width: 98%;
max-width: 900px; /* arbitraty */
margin-right: auto;
margin-left: auto;
padding: 10px;
border: 1px solid blue;
}
.masthead {
border: 1px solid lime;
}
.masthead .settings-list {
margin: 0;
padding: 0;
list-style: none;
/* */
margin-top: 10px;
}
#media (min-width: 400px) {
.masthead {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.masthead .settings-list {
display: flex;
flex-direction: row;
margin-top: 0;
}
}
<header class="page-section site-header">
<div class="inner-column">
<nav class="masthead">
<button class="upload">upload</button>
<ul class="settings-list">
<li class="setting">
<button>Settings A</button>
</li>
<li class="setting">
<button>Settings B</button>
</li>
<li class="setting">
<button>Settings C</button>
</li>
<li class="setting">
<button>Settings D</button>
</li>
</ul>
</nav>
</div>
</header>

Answer 2

You'll have to change your positions from hardcoded pixels, ex 20px to a responsive measurement such as % or em. This is because pixels are fixed-size units while percent and ems are scalable units.
Try experimenting with different units and numbers until the page reacts in the manner you expect.
CSS Units explained

Answer 3

Just use #media only screen and (min-width: 600px) in your css. This helps you to allow different styling for different screen sizes. Use one for Pc, tablet and smartphone. You can change in it all other CSS Attributes.