Add Spacing Between Two Inline-Block Elements - html

Question

I have a modal button next to my header and both elements have display: inline-block;. I am trying to make spacing and have the button go further to the right and keep the header element centered.
I tried adjusting the padding of the item container and that still did not work?
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="pageheadp">Click on any of the tabs to track your progress in that category. </p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
<li class="active"> Weekly Weight Δ
</li>
<li>Total Weight Δ
</li>
<li>Weekly Steps
</li>
<li>Total Steps
</li>
<li>Weekly Minutes
</li>
<li>Total Minutes
</li>
<li>Step Points
</li>
<li>Exercise Points
</li>
<li>Weekly Winners
</li>
</ul>

Answer 1

First add position: relative to .center to correctly position the button with absolute positioning.
And add this ruleset for .btn.btn-info.btn-md selector:
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
position: relative;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="pageheadp">Click on any of the tabs to track your progress in that category.</p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
<li class="active">Weekly Weight Δ</li>
<li>Total Weight Δ</li>
<li>Weekly Steps</li>
<li>Total Steps</li>
<li>Weekly Minutes</li>
<li>Total Minutes</li>
<li>Step Points</li>
<li>Exercise Points</li>
<li>Weekly Winners</li>
</ul>

Answer 2

You can add absolute positions to your button :
.btn.btn-info.btn-lg {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
right:15px;
top: 10px;
}

Answer 3

Perhaps Add a
<br>
in between the two divs. If not then maybe change this.
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
to
<button type="button" class="btn btn-info btn-lg ml-5" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
if not then change your css to
.btn.btn-info.btn-lg {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
right:15px;
top: 10px;
margin-right: 50px;
}