my stylesheet is not working using CSS bootstrap-CodePudding

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

<navbar >
  <div >
    <div >
      HP 90/90
    </div>
    <div >
      LEVEL 1
      <div ></div>
    </div>
    <div >
      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

CodePudding user response：

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

 <div >
      1 of 3
    </div>
    <div >
      2 of 3 (wider)
    </div>
    <div >
      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 >
  <div >
    <div >
      <div >
        HP 90/90
      </div>
      <div >
        LEVEL 1
        <div ></div>
      </div>
      <div >
        AP 50/50
      </div>
    </div>
  </div>
</navbar>

CodePudding user response：

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)