Cannot Set Spacing for Element In Navbar Bootstrap

Question

I recently started learning web development, and a few weeks ago, I started working on a personal project, a simple website that generates random characters.

A few says ago, I started working on my website's navbar design using bootstrap, css, and html. Everything's been going pretty well, up until I tried to add left spacing(margins) my hamburger menu(that is left side of my navbar) that appears if a page is collapsed small enough. Originally, I was hoping that I could put spacing between the edge of the left side of the website and the menu, but gave up after multiple attempts, all fails. This is how my minimized navbar currently looks like:

Here is my HTML:

<?php
  use Core\Router;
  use Core\H;
  use App\Models\Users;
  $menu = Router::getMenu('menu_acl');
  $currentPage = H::currentPage();
?>
<nav class="navbar navbar-default custom-navbar">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container-one">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?=PROOT?>home"><?=MENU_BRAND?></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main_menu">
      <ul class="nav navbar-nav">
        <?php foreach($menu as $key => $val):
          $active = ''; ?>
          <?php if(is_array($val)): ?>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?=$key?> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <?php foreach($val as $k => $v):
                  $active = ($v == $currentPage)? 'active':''; ?>
                  <?php if($k == 'separator'): ?>
                    <li role="separator" class="divider"></li>
                  <?php else: ?>
                    <li><a class="<?=$active?>" href="<?=$v?>"><?=$k?></a></li>
                  <?php endif; ?>
                <?php endforeach; ?>
              </ul>
            </li>
          <?php else:
            $active = ($val == $currentPage)? 'active':''; ?>
            <li><a class="<?=$active?>" href="<?=$val?>"><?=$key?></a></li>
          <?php endif; ?>
        <?php endforeach; ?>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <?php if(Users::currentUser()): ?>
          <li><a href="#">Hello <?=Users::currentUser()->fname?></a></li>
        <?php endif; ?>
      </ul>
    </div><!-- /.navbar-collapse -->
</nav>

& CSS:

.custom-navbar .navbar-right {
        float: right;
      margin-right: 0;
      padding-left: 10px;
    }

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: left;
        padding-left: 10px;
          margin-top: -7.5px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        // float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
      margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
    ul > li > a {
        float: none;
}
}

.container-one{
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 0px;
  margin-bottom: 0px
}

I have tried adding margins to the button and padding to the div, but both still didn't work. Any help appreciated

Answer 1

Try this

.custom-navbar .navbar-right {
        float: right;
      margin-right: 0;
      padding-left: 10px;
    }

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: left;
        padding-left: 10px;
          margin-top: -7.5px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        // float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
      margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
    ul > li > a {
        float: none;
}
}

.container-one{
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 0px;
  margin-bottom: 0px
}

<?php
  use Core\Router;
  use Core\H;
  use App\Models\Users;
  $menu = Router::getMenu('menu_acl');
  $currentPage = H::currentPage();
?><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default custom-navbar">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container-one">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?=PROOT?>home"><?=MENU_BRAND?></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main_menu">
      <ul class="nav navbar-nav">
        <?php foreach($menu as $key => $val):
          $active = ''; ?>
          <?php if(is_array($val)): ?>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?=$key?> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <?php foreach($val as $k => $v):
                  $active = ($v == $currentPage)? 'active':''; ?>
                  <?php if($k == 'separator'): ?>
                    <li role="separator" class="divider"></li>
                  <?php else: ?>
                    <li><a class="<?=$active?>" href="<?=$v?>"><?=$k?></a></li>
                  <?php endif; ?>
                <?php endforeach; ?>
              </ul>
            </li>
          <?php else:
            $active = ($val == $currentPage)? 'active':''; ?>
            <li><a class="<?=$active?>" href="<?=$val?>"><?=$key?></a></li>
          <?php endif; ?>
        <?php endforeach; ?>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <?php if(Users::currentUser()): ?>
          <li><a href="#">Hello <?=Users::currentUser()->fname?></a></li>
        <?php endif; ?>
      </ul>
    </div><!-- /.navbar-collapse -->
</nav>