structure.css

  * {
            border: 1px solid black;
        }

        .topnav {
            float: right;
        }

        .topnav ul li {
            float: left;
        }

        .page {
            width: 800px;
            margin: auto;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        main {
            position: relative;
            min-height: 1000px;
        }

        nav {
            width: 200px;
        }

        .content {
            position: absolute;
            left: 200px;
            top: 0px;
            width: 600px;
        }

        #advertisement {
            position: fixed;
            top: 200px;
            left: 10px;
            height: 100px;
            width: 100px;
        }

        .wrapper {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
            grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        }

        .box {
            border-radius: 5px;
            padding: 20px;
            font-size: 150%;

        }

        .a {
            grid-column: col1-start / col3-start;
            grid-row: row1-start;
        }

        .b {
            grid-column: col3-start;
            grid-row: row1-start / row2-end;
        }

        .c {
            grid-column: col1-start;
            grid-row: row2-start;
        }

        .d {
            grid-column: col2-start;
            grid-row: row2-start;
        }

        .flex-container {
            display: flex;
        }