As a backend dev I didnt know how hard frontend was ;).

How can I put the "Create" button above the left side of the table:
[![The problem](https://i.stack.imgur.com/I2rg0.png)](https://i.stack.imgur.com/I2rg0.png)
Right now the button is in the middle of the table because the table is in a . This is the full code:

```
<div align="center">
<h1>All Tournaments </h1>
<p>Show: <a href="/tournaments/?show=played" id="tournament_link">History</a> or <a href="/tournaments/?show=unplayed" id="tournament_link">Unplayed</a></p>
        <a href="create/" class="btn btn-default">Create</a>

<table style="width:50%" id="tournament_table">
<tr id="table_head">
    <th>Name</th>
    <th>Players needed</th>
    <th>Rounds</th>
    <th>Host</th>
    <th>Select robot</th>
      <th>Played</th>
    <th>Join tournament</th>

```

The button is the element. I want the page look like this:

[![The goal](https://i.stack.imgur.com/XYnPU.png)](https://i.stack.imgur.com/XYnPU.png)

Thanks

EDIT: The complete page looks like this.

[![The full page](https://i.stack.imgur.com/Y1UYM.png)](https://i.stack.imgur.com/Y1UYM.png)

The text above and the table beneath the Create button need to be centered. If I pull the button out of the align center div it appears completely to the left.