How to move social links and shopping cart?

I'm trying to put a border above and below the navigation, but every time i do it moves the shopping cart and social links to the middle too. Is there a way to put a line above and below the navigation links without moving the shopping cart and social links too?

This is the code I'm using: 

@media only screen and (min-width:640px) {.header-announcement-bar-wrapper {

    padding-left: 0px !important;

    padding-right: 0px !important;

  }}

@media only screen and (min-width:640px) {.header-display-desktop {

    flex-direction: column;

  }}

@media only screen and (min-width:640px) {.header-title-nav-wrapper {

    flex: 0 0 100% !important;

    margin-right: auto;

    width: 100% !important;

  }}

@media only screen and (min-width:640px) {nav.header-nav-list {

    display: flex;

    width: 100%;

    border-top: 2px solid #59636C;

   border-bottom: 2px solid #59636C;

   padding-top: 10px;

padding-bottom: 10px;

margin-bottom: -22px;

  }}

Thanks!

Hi. What is your site url? We can check easier

Hi! It's https://bohemehairartistry.com/ but the domain isnt connected to this squarespace site yet

20 hours ago, KayleeRose20 said:

Hi! It's https://bohemehairartistry.com/ but the domain isnt connected to this squarespace site yet

You can also share built-in domain (something like this: abcxyz.squarespace.com)