@font-face { font-family: SuperGreatly; src: url(fonts/SuperGreatly.ttf); } body { background-image: url('img/bg.png'); background-position: fixed; background-size: cover; background-repeat: none; font-family:Nunito Sans; font-size: 14px; } #main{ width: 800px; margin: 10px auto; display: grid; grid-template-columns: 25% 75%; grid-row-gap: 10px; } .navi a { color: #ea6eb7; text-decoration: none; display:block; } .navi a:hover { color:#fff; background-color:#a46dcb; display:block; width:160px; margin-left:10px; padding:none; } #stuff { padding: 3px; width: 600px; background-color: #f8f8f8; } .side { font: 10px monospace; color: #fff; text-align: center; display:block; background-color:#ff7e96; background-size:200px; padding:3px; margin:5px; } h1 { font-family: SuperGreatly; font-size: 30px; color: #fff; display:block; background-color: #ffcc63; text-transform: uppercase; text-align: center; } h2 { font-family: SuperGreatly; font-size:20px; color:#fff; display:block; background-color:#88DBD8; text-transform: uppercase; text-align:center; } .dropdown { position:relative; } .dropbtn { border:none; background: none; width:160px; color:#ea6eb7; font-size:11px; font-family:Nunito Sans; padding:none; } .dropdown-content { background: linear-gradient(100deg,rgba(234, 110, 183, 1) 0%, rgba(244, 118, 167, 1) 25%, rgba(255, 161, 118, 1) 50%, rgba(255, 204, 99, 1) 75%, rgba(255, 204, 99, 1) 100%); z-index: 1; width: 160px; display:none; text-align: center; position: absolute; color: #ffffff; margin-left:10px; } .dropdown a { text-decoration: none; color: #fff; display: block; } .dropdown a:hover { color: #fff; background: #a46dcb; cursor:pointer; margin-left:0px;} .dropdown:hover .dropdown-content { display: block; color:#fff; transition-delay: 500ms; } .dropdown-content a { color:#fff; } .dropdown:hover .dropbtn { background:#a46dcb; color:#fff; } li { list-style: none; padding:3px; } activity { padding:10px; display:block; } activity:hover { background-color: #dae4ea; } activity b { color:#198dda; } /* my test edits start here - moved .navi from above */ .navi { width: 180px; padding: 3px; font-size:11px; background-color: #f8f8f8; border-right:3px #ea6eb7 solid; text-align:center; /* if you want the sidebar text itself to be centered (like in the second screenshot I sent) (different from the centered POSITIONING - see below) then leave this line here. if you like it better as the first screenshot, remove this line or just comment it out! */ display: flex; /* tells this div to display as a flexbox */ flex-direction: column; /* what direction do we want items inside the flexbox to display? for this navigation bar, vertical makes sense so we pick column */ justify-content: flex-start; /* this is what brings all the items into the center of the column - the POSITIONING! if you'd rather have it at the top, you'd want to change this to justify-content: flex-start; */ } #wrapper { height: 100%; /* basically telling this div to expand to fit the whole height of the browser window. differs from using auto - read here for a better explanation of the difference than I could articulate: https://thelinuxcode.com/difference-between-css-height-100-vs-height-auto/*/ margin: 0 auto; /* telling it that we want 0 margin at the top and bottom, and to automatically expand to occupy all available horizontal space within its containing block (in this case, the element, which is the Whole Browser Window. helpful visualization of the difference between width auto and 100% here: https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent */ display: flex; /* tells this div to display as a flexbox */ flex-direction: row; /* what direction do we want items inside the flexbox? since your design wants the navbar on the left and content on the right, row is ideal */ flex-wrap: wrap; /* if the screen becomes too small to display everything inside this flexbox on a single row, what should we do? in this case, we want it to wrap - it will display the navbar first, as that's the first item inside this flexbox, and then the content. you can see this in action if you make your broswer window super thin! */ justify-content:center; }