Position navigation menu items underneath site title

Please help!

How do I position the navigation menu items underneath the site title? They are currently positioned to the right of the site title.

This is the CSS I currently have:

@media only screen and (min-width:991px) {   
  .page-section:first-of-type {     
    padding-top:0px !important;   
  }   
  .page-section {     
    margin-left: 200px;   
  }   
  #header {     
    width: 200px;     
    position: fixed;     
    height: 100vh;     
    z-index: 99999 !important;     
    display: table;
    writing-mode: horizontal-lr; 
    text-orientation: mixed;
  }   
  .header .header-announcement-bar-wrapper {     
    padding: 10px 10px 10px 10px;   
  }   
  .header-inner{    
    height: 100vh;     
    display: table-cell;     
    vertical-align: top;
  } 
  .header-nav-list {
    justify-content: left !important;
}
}

Also how can I add in social icons at the bottom left?

All help much appreciated.

Thank you!

Update: I have managed to position the navigation items under the site title.

I now have another problem - the first item in the nav list is indented. Can anyone tell how to stop it from being indented?