Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav section that is troubling me. I tried various solutions like switching to a flexbox nav and setting the display to block, but so far, nothing seems to work. Given that I'm still very new to this field, there's clearly a lot more for me to learn, so any guidance or help would be greatly appreciated.
/* Global styles */
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 16px;
}
body {
background-color: #d8d8d8;
}
header {
background-color: #fff;
color: #000;
border-bottom: 3px solid #fa58f4;
position: absolute;
top: 0;
width: 100%;
}
/* Top navbar styles */
.topnav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
.topnav li a {
padding: 12px 12px;
text-decoration: none;
color: #000;
}
.topnav a:hover {
text-decoration: underline;
}
/* about me style */
.text-wrap {
float: left;
margin: 5px;
}
.about-me-wrapper>h1 {
text-align: center;
text-decoration: underline;
}
/* main content styles */
.content-container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 20px;
margin: 4em 10px;
}
aside {
grid-column: 1 / 4;
grid-row: 1;
}
article {
grid-column: 4 / 10;
grid-row: 1;
}
/* Side navbar style, still needs work */
.sidebar {
grid-column: 10 / 13;
grid-row: 1;
}
.sidebar ul {
background-color: #fff;
list-style-type: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
...
</div></pre>