The columns aren't horizontally aligned :  

[![column](https://i.stack.imgur.com/1l4CO.png)](https://i.stack.imgur.com/1l4CO.png)

The problem: <https://imgur.com/9m2R42R>

I want to make 2 columns in my blog: 

1. one is the main page of the blog with articles
2. the other one is a menu.

I decided to do that through CSS as I have no other idea how to do that :) (take a look at the code below).

As for my HTML, I'm trying to keep it as clean as possible (take a look at the code below).

How can I align the second column with the other one? 

It seems like there's some padding about 20px but it doesn't even exist within my entire code. I swear to god I don't know what to do with this.

```css
.column {
  float: left;
  padding-top: 1%;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

/* Left Column (main) */

.column.main {
  width: 76%;
  background-color: grey;
  padding-bottom: 1%;
  padding-right: 1%;
  padding-left: 1%;
}

/* Right Column (menu) */

.column.menu {
  width: 20%;
  background-color: lightgrey;
  padding-bottom: 1%;
  padding-right: 1%;
  padding-left: 1%;
}
```

```html
<div class="column main">
  <div class="card">
    Content
  </div>
</div>

<div class="column menu">
  <div class="card">
    <h3 align="center">Main Menu</h3>
    <li>Main Menu</li>
    <li>English</li>
    <li>German</li>
    <li>Spanish</li>
  </div>
</div>
```