Form unable to center and max width

Question

I have a form that I would like to center in a div, but also apply a max-width

Here is what I have:

HTML:

  <div class="site-section mb-5">
    <div class="container">
     <div class="form-register">
       <form method="POST">
           {% csrf_token %}
               <legend>Join Today</legend>
               {{ form|crispy }}
               <button class="btn btn-outline-info" type="submit">Sign Up</button>
       </form>
     </div>
      <p class="p-center">Already Have An Account? <a class="ml-2" href="{% url 'login' %}">Sign In</a>
          </p>
    </div>
  </div>

CSS:

.form-register {
  display: inline;
  margin: 0 auto;
}

form {
  width: 80%;
  max-width: 300px;
  display: inline;
  margin: 0 auto;
}

However if I switch the width and max-width between the two CSS classes, I get either of the following results:

or