添加空格后出现意外的页边距上限[no-wrap]

Question

Please help me stuck on this for four hours. I get this unexpected space the circle black mark above my pagination when I use white-space: nowrap; on div, please how do i go about solving this, I have tried adding margin-top:-50px!important; but it just stays there and does not move according to the margin rule.

<div class="container">
    <div style="height:50px;background-color:#eee;overflow-x:auto;white-space: nowrap;width:100%;margin-bottom:40px;border:1px solid #000;"> //I guess this is what makes the unexpected space, PLEASE HELP.
        <div align="center" style="padding-top:10px;">
            <div id="pagination_controls" draggable="false" ondragstart="return false">
                <?php echo $paginationCtrls; ?>
            </div>
        </div>
    </div>
</div>


<style>
div#pagination_controls {
  position: absolute;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  font-size: 21px;
  width: 90%;
  max-width: 90%;
  overflow-x: auto!important;
  margin-left: ;
}

div#pagination_controls>a {
  color: #06F;
  margin-top: 50px;
}

div#pagination_controls>a:visited {
  color: #06F;
}

#pagination_controls a.main-nav-item:hover {
  background-color: #fff!important;
  padding-top: 7px;
  padding-bottom: 7px;
  border: 1px solid #000;
  padding-left: 5px;
  padding-right: 5px;
  color: #000;
}
</style>

Answer 1

Just make the div position:absolute; then you can place it anywhere. Specify the desired top: you need. Can be done like this -

<div class="container">
    <div style="position:absolute;top:10px;height:50px;background-color:#eee;overflow-x:auto;white-space: nowrap;width:100%;margin-bottom:40px;border:1px solid #000;"> //I guess this is what makes the unexpected space, PLEASE HELP.
        <div align="center" style="padding-top:10px;">
            <div id="pagination_controls" draggable="false" ondragstart="return false">
                <?php echo $paginationCtrls; ?>
            </div>
        </div>
    </div>
</div>

Answer 2

adding to what trex1999 said you can add z-index to it also.

<div class="container">
    <div style="z-index:800;position:absolute;top:10px;height:50px;background-color:#eee;overflow-x:auto;white-space: nowrap;width:100%;margin-bottom:40px;border:1px solid #000;"> //I guess this is what makes the unexpected space, PLEASE HELP.
        <div align="center" style="padding-top:10px;">
            <div id="pagination_controls" draggable="false" ondragstart="return false">
                <?php echo $paginationCtrls; ?>
            </div>
        </div>
    </div>
</div>