I am having some problems making the website mobile friendly. the text starts coming up all weird and not in alignment at all. Any suggestions as to what I can add to make the text normal again. website coded in html, js, python

On pc

On phone

This is happening in some other webpages too

The code block regarding this:

<br>
    {%block content%}
    {%include 'navbar.html'%}
    {%endblock%}
    <br><br>
    <center>
        <div class="formdiv">
    <form method="POST" action="{{url_for('test_results')}}">
        <h1>A test to help you explore careers</h1>

        <br><br><br>
        <h2>Are you ...?</h2>
        <ul class="checkbox-grid">
        {%for i in are_you%}
        {%for j in are_you[i]%}
        <li><input type="checkbox" name="{{i}}"><label for="{{i}}">{{j}}</label></li>
        {%endfor%}
        {%endfor%}
        </ul>

        
        <br><br><br><br><br><br><br><br><br>
        <h2>Can you ...?</h2>
        <ul class="checkbox-grid">
        {%for i in can_you%}
        {%for j in can_you[i]%}
        <li><input type="checkbox" name="{{i}}"><label for="{{i}}">