I'm learning how to make a table in HTML , however the "c" column heading does not align with its data, and is instead grouping up with the "b" column heading.

Output:

[![Table with incorrect table headings](https://i.stack.imgur.com/MDh25.jpg)](https://i.stack.imgur.com/MDh25.jpg)

Here is the code:

```css
table,th,td{
  padding:20px;
  border:10px solid navy;
}
```

```html
    <body>
        <table>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>

        </table>
    </body>
```

I tried changing the values of padding in the `<th>` tag for "c" and "b" , but it doesn't seem to resolve the problem. How do I fix this?