Css layout - column on the right and up the top

Hi.

I’ve been practising using CSS and HTML to layout a website. I’ve been having an issue where the columns on the right are not at the top and not stacked on top of one another. I’ll include a photo of what it looks like and my code. Also my footer is currently at the top of my page… If you have any other advice I’d really appreciate it. Thanks!

HTML

<!DOCTYPE html>
<head>
    <title> Page Layout </title>
    <link rel="stylesheet" type="text/css" href="C:\Users\arhud\Documents\Layout\layoutstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Staatliches|Thasadith" rel="stylesheet">
</head>
<body>
    <div class="header"> 
    <h1> Website </h1> 
    <p> Layout practice with HTML & CSS </p>
    </div>
    <div class="nav">
        <a href="#"> Link </a>
        <a href="#"> Link </a>
        <a href="#"> Link </a>
        <a href="#"> Link </a>
    </div>
    <div class="row">
    <div class="leftcolumn">
        <div class="card">
        <h2> HEADING </h2>
        <h5> Friday 17th August </h5>
        <p> This is a practice layout that I am making with html and styling with CSS. This would be the main body of the website.</p>

    </div>
    </div>
    <div class="leftcolumn">
        <div class="card">
            <h2> HEADING </h2>
            <h5> Thursday 16th August</h5>
            <p> Another practice post. </p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2> About Me </h2>
            <p> I dunno. </p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2> Popular posts </h2>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2> Social Media </h2>
        </div>
    </div>
    </div>
    <div class="footer">
        <h3> Footer </h3>
    </div>
</body>

CSS


.header {
    padding: 30px;
    width: 100%;
    background-color: whitesmoke;
    text-align: center;
}

.header h1 {
   font-family: 'Staatliches', cursive;
   font-size: 150px;
}

.header p {
    font-family: 'Thasadith', sans-serif;
    font-size: 25px;
}

.nav {
    overflow: hidden;
    background-color: black;
    width: 100%;
    position: sticky;
    border: 10px, white;
    
}

.nav a {
    float: left;
    color: whitesmoke;
    display: block;
    padding: 14px;
    text-decoration: none;
    font-family: 'Thasadith', 'san-serif';
}

/* Change colour on hover */
.nav a:hover {
    background-color: darkgray;
}

.card {
    background-color: whitesmoke;
    padding: 20px;
}

.leftcolumn {   
    float: left;
    width: 75%;
  }
  
  /* Right column */
  .rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
  }
  

.leftcolumn h2 {
    font-family: 'Thasadith', 'san-serif';
}


.row::after {
    content: "";
    display: table;
    clear: both;
}

.footer {
    background-color: whitesmoke;
    padding: 10px;
}


Doing this yourself is alot of confussing work.

This might be a good moment to look into Bootstrap. Bootstrap is created to make these kind of things more workable and easy. You will need to rewrite a big deal of you’re website tho. Here is a getting started tutorial if you want to look into it.

I know this is not a answer to your question but at least some advise is better than nothing right ?