How can I move the contents of a bootstrap navbar to the middle?

Issue

I'm trying to make a simple navbar and I want the content of the navbar like "home" and "contact" to be shifted to the right a bit so that it works for mobile users too. This is what my navbar looks like and the red line I drew represents where I want the start of "Test" to be.

I'm not sure how to move "Test Home Contact Us" to the start of that red line. I tried putting style="left:200px" inside each of the texts' <a>...</a> section, but it didn't work. I'm using a bootstrap navbar so I basically just copy and pasted a navbar from bootstrap and here's the code for it:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{{ url_for('home_page') }}"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="market">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

Solution

You're likely looking for style="padding-left: 200px;" instead of left.

Answered By - Raxi