How To Make Border Go Under Navigation Bar?

Site URL: https://www.rafida.org

Hey,

I've added some custom code to make the announcement bar, navigation, and social links to stick while scrolling.
The only issue now is that for some reason the orange borders on the edge of the site are messed up.

- On the right side the orange border goes under the navigation bar,
- On the left side the orange border goes over the navigation bar.

Is there a way to make the orange bar go under the navigation on the left?

website: rafida.org
pass: lastphasetesting3

- I've added a screenshot highlighting the issue.
- I've added the code I used to make the announcement bar, navigation, and social links to stick while scrolling.

/* remove close button on announcement bar */
.sqs-announcement-bar-close { display: none !important }

/* remove underline link */
.sqs-announcement-bar-dropzone a {
    text-decoration: none;
	border-bottom: none;
	background-image: none;
}

.Header.Header--top {
  position: fixed;
  top: 41.5px;
  z-index:99999;
  width:100%;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.1)
}

.Header--overlay.Header.Header--bottom {
  top: 95px;
  z-index:9999;
}

.Header.Header--bottom {
  top: 50px;
  z-index:9999;
}

.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.Intro {padding-top:110px;}
.Index {padding-top:110px;}
.Main {padding-top:110px;}
.Main.Main--page {padding-top:0px !important;}
.Main.Main--blog-item {padding-top:0px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
}

Add

left: 0;

to .Header.Header--top

@rwp

Genius! haha. Such a simple solution. As you can tell I have 0 coding experience. Just mashed this together from different posts online.

Really appreciate it.