I've been struggling to align my table to the left side of my page using bootstrap with Flask. Despite numerous attempts, the tables remain centered and unaffected on the page as shown below.
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content %}
<h1 align="center">Assist A Side</h1>
<div class="align-left-start">
<table class="table table-dark" name="Goalkeepers" id="tableStyle" align="right">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Positioning</th>
<th scope="col">Handling</th>
<th scope="col">Reflexes</th>
<th scope="col">Average</th>
</tr>
</thead>
<tbody>
<tr>
{% for gk in goalkeepers %}
<td>{{ gk.gkName }}</td>
<td>{{ gk.positioning }}</td>
<td>{{ gk.handling }}</td>
<td>{{ gk.reflexes }}</td>
<td>{{ gk.average }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table class="table table-dark" name="Outfield">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Defending</th>
<th scope="col">Passing</th>
<th scope="col">Dribbling</th>
<th scope="col">Shooting</th>
<th scope="col">Stamina</th>
<th scope="col">Average</th>
</tr>
</thead>
<tbody>
<tr>
{% for player in players %}
<td>{{ player.name }}</td>
<td>{{ player.defending }}</td>
<td>{{ player.passing }}</td>
<td>{{ player.dribbling }}</td>
<td>{{ player.shooting }}</td>
<td>{{ player.stamina }}</td>
<td>{{ player.average }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}