.main-container {
    display: grid;
    grid-template-columns: 10% 20% 50% 20%;
    grid-template-rows: auto 1fr;
}

.header {
    display: grid;
    grid-column-start: 1;
    grid-column-end: -1;
}

.top-heading {
    display: flex;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    justify-content: center;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.nav-menu-item {
    padding: 0 10% 0 10%;
}

.list-and-post-container {
    display: flex;
    grid-row-start: 2; 
    grid-column-start: 2;
    grid-column-end: 4;
}


 .posts-list {
     display: flex;
     flex-direction: column;
     flex: 1;
 }

.selected-post {
    display: grid;
    flex: 2.5;
}

.blog-post-title {
    grid-column-start: 1;
}

.blog-post-date {
    grid-column-start: 1;
}