mobile responsive not working for all of mobile - html

Question

Im a beginner for the bootstrap, some text are every where, how can i set it
Im trying to make some application its is not a working for all of mobile devices,its only working for iPhone 6+ and nexus 6p
how can i fix it??
html
<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#63676e,#ec9850"><script>$(".progress-bar").loading();</script></div>
<div id="Main">
<h2 class="text-color-header">Room Utilization</h2>
<h5 class="text-header">9 rooms occupied today</h5>
<div id="container">
<div class="block block-1">
<h1>$ 2,300</h1>
<h5>Today Revenue</h5>
</div>
<div class="block block-2">
<h1>$ 12,100</h1>
<h5>Reservation for next 15 days</h5>
</div>
<div class="block block-3">
<h1>$ 41,000</h1>
<h5>Revenue Todate / Month</h5>
</div>
<div class="block block-4">
<h1>$ 53,100</h1>
<h5>Expected Revenue for this month</h5>
</div>
<!--Menu Part 02-->
<div id="base">
<div class="base-block">
<h4>Payments</h4>
<h1>$ 2,000</h1>
<h5>5 check-outs today</h5>
</div>
<div class="base-block">
<h4>Down Payments</h4>
<h1>$ 300</h1>
<h5>2 Bokings withdown payments</h5>
</div>
</div>
<!-- End of menu Part-->
</div>
</div>
css
body{webkit-overflow-scrolling: touch;}
.text-color-header { margin-top: 250px;}
/* Progress Bar */
.progress-bar {
text-align: center;
height: 150px;
width: 150px;
margin-left: 100px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar div {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
.progress-bar div span {
position: absolute;
font-family: Arial;
font-size: 35px;
line-height: 175px;
height: 175px;
width: 175px;
left: 12.5px;
top: 12.5px;
text-align:center;
border-radius: 50%;
background-color:#e0e0e0;
color: black;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 100px 200px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*End of Progress Bar*/
.page {
margin: 0px auto;
display: flex;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.clearfix {
display: inline-block;
margin: 0px auto;
}
h5,
.h5 {
font-size: 13px;
text-align: center;
}
.block {
width: 200px;
height: 100px;
margin: 1px;
display: inline-block;
background: ;
color: #d4c4b6;
}
.block:hover h1 {
color: #000000;
}
.block:hover h5 {
color: #A48973;
}
#base {
background: #e2e2e2;
display: inline-block;
height: 120px;
margin-left: 0px;
margin-top: -7px;
position: relative;
width: auto;
}
#base:before {
border-bottom: 35px solid #e2e2e2;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: "";
height: 0;
left: 173px;
position: absolute;
top: -20px;
width: 0;
}
h1,
.h1 {
font-size: 27px;
text-align: center;
}
h2,
.h2 {
font-size: 20px;
text-align: center;
}
h4,
.h4 {
font-size: 16px;
text-align: center;
}
.base-block {
display: inline-block;
height: 120px;
width: 200px;
margin: 1px;
display: inline-block;
}
.base-block h1,
h4 {
color: #000000;
}
.base-block h5 {
color: #A48973;
}
.navbar-default .navbar-brand {
color: #A48973;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #A48973;
}
.search-bar {
padding: 7px 15px;
}
/*Start Media query*/
#media (max-width: 768px) {
.form-control {
padding: 6px 100px;
}
}
/*End Of Media query*/

Answer 1

Use bootstrap grid layout classes col-xs-6 for div's instead of block-1, block-2. In your css, set width and height in percentages instead of numbers in px.
Also, try not to set height, instead set width.
Use classes like panel and panel-body in each div.
Put entire content in
<div class="container-fluid">
//Create three rows
<div class="row">
//create 2 divs with class col-xs-6
</div>
<div class="row">
//create 2 divs with class col-xs-6
</div>
<div class="row">
//create 2 divs with class col-xs-6
</div>
</div>

Answer 2

I couldn't add a comment so I'll just compound with Amit's answer. Make sure this
<meta name="viewport" content="width=device-width, initial-scale=1" /> is in your head tags as well. It set you page viewport size to the px size of device. Without it the code Amit suggested won't work. All in all your not actually using any Bootstrap in your code. I would also recommend looking through this to get a true understanding of Bootstrap https://www.w3schools.com/bootstrap