ab.css

/* div {
    border: 1px solid black;
    margin: 10px;
}
 */

.main-container{
    display: flex;
    flex-direction: row;
    height: 600px;
}
.container1{
    flex: 1;
}
.menu{
    display: flex;
    flex: 1;
    height: 65px;
    width: 42px;
    position: relative;
    left: -6px;
    top: -10px
}
.logo{
    display: flex;
    flex: 1;
    height: 83px;
    width: 32px;
    position: relative;
    left: 43px;
    top: -82px
}
.compose{
    display: flex;
    flex: 1;
}
.compose-button{
    flex: 1;
    display: flex;
    height: 57px;
    width: 305px;
    position: relative;
    top: -84px;
    left: 0px;
    border-radius: 15px;
    background-color: #c2e7ff;
    border: 1px solid white;
}
.text{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-size: 0.895rem;
    letter-spacing: normal;
    font-weight: 500;
    position: relative;
    top: -83px;
    left: -88px;
    color: black;
    line-height: 16px;
}
.pen{
    display: flex;
    flex: 1;
    height: 19px;
    width: 36px;
    position: relative;
    left: -255px;
    top: -65px;
}
.inbox{
    display: flex;
    flex: 1;
}
.compose-button2{
    display: flex;
  
    height: 33px;
    width: 252px;
    position: relative;
    top: -70px;
    left: -19px;
    border-radius: 19px;
    background-color: #cfdbff;
    border: 1px solid white;
}
.text2{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.875rem;
    font-weight: 550;
    position: relative;
    top: -75px;
    left: -196px;
    color: black;
    line-height: 9px;
}
.starred{
    display: flex;
    flex: 1;
}
.compose-button3{
    display: flex;
    
    height: 33px;
    width: 252px;
    position: relative;
    top: -85px;
    left: -19px;
    border-radius: 19px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.text3{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 100;
    position: relative;
    top: -90px;
    left: -196px;
    color: black;
    line-height: 9px;
}
.snoozed{
    display: flex;
    flex: 1;
}
.compose-button4{
    display: flex;
 
    height: 33px;
    width: 252px;
    position: relative;
    top: -99px;
    left: -19px;
    border-radius: 19px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.text4{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 100;
    position: relative;
    top: -104px;
    left: -196px;
    color: black;
    line-height: 9px;
}
.important{
    display: flex;
    flex: 1;
}
.compose-button5{
    display: flex;
  
    height: 33px;
    width: 252px;
    position: relative;
    top: -114px;
    left: -19px;
    border-radius: 19px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.text5{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 100;
    position: relative;
    top: -117px;
    left: -196px;
    color: black;
    line-height: 9px;
}
.sent{
    display: flex;
    flex: 1;
}   
.compose-button6{
    display: flex;
   
    height: 33px;
    width: 252px;
    position: relative;
    top: -127px;
    left: -19px;
    border-radius: 19px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.text6{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 200;
    position: relative;
    top: -130px;
    left: -196px;
    color: black;
    line-height: 9px;
}
.drafts{
    display: flex;
    flex: 1;
}
.compose-button7{
    display: flex;
    
    height: 33px;
    width: 252px;
    position: relative;
    top: -140px;
    left: -19px;
    border-radius: 19px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.text7{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 200;
    position: relative;
    top: -144px;
    left: -196px;
    color: black;
    line-height: 9px;
}

.container2{
    flex: 5;
}
.header {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    position: relative;
    height: 64px;
    top: -44px;
    left: -150px;
    width: 753px;
}

.submit-button {
    background-color: #a2ccfd24;
    border: 1px solid #f8f9fa;
    border-radius: 6px;
    color: #3c4043;
    justify-content: left;
    font-family: Arial, sans-serif;
    position: relative;
    width: 721px;
    height: 50px;
    left: -3px;
    top: 44px;
}

.search {
    position: absolute;
    left: 50px;
    top: 47px;
    height: -1px;
    overflow: hidden;
    display: block;
    font: normal 16px Google Sans, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #b8bdc6;
}

.icon {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 14px;
    line-height: 33px;
    position: relative;
    top: 30px;
    right: 715px;
}
.icon2 {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 14px;
    line-height: 33px;
    position: relative;
    top: 2px;
    left: 676px;
}
.icon3 {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 14px;
    line-height: 33px;
    position: relative;
    top: 2px;
    left: 1075px;
}

.icon4 {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 14px;
    line-height: 33px;
    position: relative;
    top: 2px;
    left: 1102px;
}

.icon5 {
    display: inline-block;
    fill: currentColor;
    height: 18px;
    width: 24px;
    line-height: 30px;
    position: relative;
    top: 2px;
    left: 1128px;
}
.main-body{
flex: 1;
}
.main-header{
    display: flex;
    flex: 1;
    flex-direction: row;
    
}
.primary{
    display: flex;
    flex: 1;
}
.main-button1{
    display: flex;
    height: 62px;
    width: 238px;
    position: relative;
    top: 41px;
    left: -153px;
    border-radius: 6px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.maintext1{
   float: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
    top: 43px;
    left: -339px;
    color: black;
    line-height: 9px;
}
.social{
    display: flex;
    flex: 1;
}
.main-button2{
    display: flex;
    height: 62px;
    width: 238px;
    position: relative;
    top: 41px;
    left: -200px;
    border-radius: 6px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.maintext2{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
    top: 43px;
    left: -387px;
    color: black;
    line-height: 9px;
}
.promotions{
    display: flex;
    flex: 1;
}
.main-button3{
    display: flex;
    height: 62px;
    width: 238px;
    position: relative;
    top: 41px;
    left: -238px;
    border-radius: 6px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.maintext3{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
    top: 43px;
    left: -425px;
    color: black;
    line-height: 9px;
}
.updates{
    display: flex;
    flex: 1;
}
.main-button4{
    display: flex;
    height: 62px;
    width: 238px;
    position: relative;
    top: 41px;
    left: -308px;
    border-radius: 6px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.maintext4{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
    top: 43px;
    left: -495px;
    color: black;
    line-height: 9px;
}
.forums{
    display: flex;
    flex: 1;
}
.main-button5{
    display: flex;
    height: 62px;
    width: 238px;
    position: relative;
    top: 41px;
    left: -361px;
    border-radius: 6px;
    background-color: #f3f3f3;
    border: 1px solid white;
}
.maintext5{
    flex: 1;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
    top: 43px;
    left: -546px;
    color: black;
    line-height: 9px;
}

.container3{
    flex: 0.5;
}
.rlogo{
    display: inline-block;
    border-radius: 50px;
    background-color: rgb(234, 46, 46);
    width: 32px;
    height: 32px;
    color: #f8f9fa;
    text-align: center;
    line-height: 32px;
    position: relative;
    top: 9px;
    left: 250px;
}