my stylesheet is not working using CSS bootstrap

Question

I am just learning how to do a basic web page. So this is the main code

<navbar class="navbar navbar-light pip-footer">
  <div class="row">
    <div class="col-3">
      HP 90/90
    </div>
    <div class="col-6">
      LEVEL 1
      <div class="level-progress"></div>
    </div>
    <div class="col-3">
      AP 50/50
    </div>
  </div>
</navbar>

then I want to apply these measures so that the words are spaced, but as you can see in the image they don't move

.pip-footer{ position: fixed;
    bottom: 0;
    width: calc(100% - 20px);
    margin: 10px;}

here you can see

should be look like this

Answer 1

According to bootstrap website here : https://getbootstrap.com/docs/4.0/layout/grid/ you can change the classes to be like

 <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>

another solution which is I don't know if it still works in bootstrap4 is that you can wrap all you divs that contain col class inside a div the have col-12 class so the code will be

<navbar class="navbar navbar-light pip-footer">
  <div class="row">
    <div class="col-12">
      <div class="col-3">
        HP 90/90
      </div>
      <div class="col-6">
        LEVEL 1
        <div class="level-progress"></div>
      </div>
      <div class="col-3">
        AP 50/50
      </div>
    </div>
  </div>
</navbar>

Answer 2

most likely a matter of the bootstrap classes' selectors having a higher specifity. In general you should be careful with this, but you can add !important to a setting to override more specific selectors, like in your case position: fixed !important; (and similar for the other parameters if necessary)