#cv_main{ display: flex; justify-content: normal; flex-direction: row; } #cv_main > #cv_left{ background-color: beige; max-width: 30%; padding: 1rem; } #cv_main > #cv_right{ background-color: cadetblue; min-width: 70%; padding: 1rem; } article header{ display: flex; flex-direction: row; align-items: center; background-color: #e0e0e0; justify-content: center; position: relative; } article header>div:first-child{ margin-left: 1rem; position: absolute; left: 0; text-align: center; } .cv_header_title{ margin: auto; display: flex; flex-direction: column; align-items: center; } .cv_header_title>*{ padding: 0; margin: 0.1rem; } .cv_content_competence{ max-width: 30%; display: grid; grid-template-columns: repeat(4, 2fr); column-gap: 1rem; row-gap: 1rem; } /*article header{*/ /* display: flex;*/ /* flex-direction: row;*/ /* align-items: center;*/ /* background-color: #e0e0e0;*/ /* justify-content: center;*/ /* position: relative;*/ /*}*/ /*article header>div:first-child{*/ /* margin-left: 1rem;*/ /*}*/ /*.cv_header_title{*/ /* margin: auto;*/ /* display: flex;*/ /* flex-direction: column;*/ /* align-items: center;*/ /*}*/ /*.cv_header_title>*{*/ /* padding: 0;*/ /* margin: 0.1rem;*/ /*}*/ /*.g_pas_idee {*/ /* position: absolute;*/ /* left: 0;*/ /* background-color: red;*/ /* text-align: center;*/ /*}*/ /*@media screen and (max-width: 700px) {*/ /* .g_pas_idee {*/ /* position: inherit;*/ /* width: 100%;*/ /* }*/ /* article header{*/ /* flex-direction: column;*/ /* }*/ /*}*/ /*article header{*/ /* display: grid;*/ /* grid-template-columns: 3fr 5fr;*/ /* align-items: center;*/ /* background-color: #e0e0e0;*/ /*}*/ /*article header>div:first-child{*/ /* margin-left: 1rem;*/ /*}*/ /*.cv_header_title{*/ /* text-align: center;*/ /* margin-right: auto;*/ /*}*/ /*.cv_header_title>h2,h3{*/ /* margin: .5rem;*/ /*}*/ /*article header>div{*/ /* max-width: 60%;*/ /* text-align: center;*/ /*}*/ /*.cv_header_title{*/ /* display: flex;*/ /* flex-direction: column;*/ /*}*/ .cv_content h4 { text-decoration: underline; } @media (max-width: 800px) { #cv_main{ flex-direction: column; } #cv_main > #cv_left{ max-width: 90%; } #cv_main > #cv_right{ min-width: 90%; padding: 1rem; } }