I've been having a problem with my reactive website; specifically it will not show the "about-me" and "popular posts" on the top left (next to the main content) when the screen is large. I would like to fix it, if possible. Right now, it shows right next to the footer, which is not what I want.
Here is the HTML and CSS I am working with:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- Begin Navigation -->
<nav role="navigation">
<a href="#">Home</a>
<a href="index-copy.html">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
</header>
<!-- End Header -->
<!-- Begin Main Content -->
<main>
<div class="row">
<div class="leftcolumn">
<article class="post">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
<h5>Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</div>
</div>
</main>
<aside>
<div class="rightcolumn">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h3>Upcoming Posts</h3>
</section>
</div>
</aside>
<footer class="footer">
<h2>Footer</h2>
</footer>
</body>
</html>and here is the CSS
* {
box-sizing: border-box;
}
/* Add a background color with some padding */
body {
font-family: Arial;
padding: 12px;
background: black;
}
/* Header*/
/*Blog Title */
header {
padding: 10px;
background: #91c7b1;
font-size: 15px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
/*navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
}
/* navigation bar links */
nav a {
color: White;
float: left;
font-family: "Electrolize", sans-serif;
padding: 15px;
text-align: center;
text-decoration: underline;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 20%;
}
/* images work in progress at the moment */
/* Add a post layout for articles */
.post {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
footer {
text-align: center;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}