Navigation covering top of sections (Flexbox)

Site URL: https://brandonhuntonline.com/

Question:

I'm using flexbox (for the first time, and mostly LOVING it!) but am having the issue of my navigation covering my image on the right. How do I get the navigation to not cover any of my sections? (This also happens when I scroll back to a previous anchor link from the bottom. The top part is hidden under the navigation.)

PW: Gamer

My CSS:

// anchor links - smooth scroll effect
html { scroll-behavior: smooth;}
//-- Change Button Hover Color
.btn:hover {background-color: grey!important; color:#000}
.sqs-block-button-element:hover {background-color:grey; color:#000}
//-- No Underline Links
header a {
background-image: none !important;
}
footer a {
text-decoration: none !important;
}
//-- 50% Split Sections WITH CONTENT IN BOTH
.sections {
display: flex;
flex-wrap: wrap;
.page-section { width: 100%;
.content-wrapper {
box-sizing: border-box!important;
}}
[data-current-styles*='"customContentWidth": 30'] {
width: 30%!important;
.content {width: 100%!important;}
}
[data-current-styles*='"customContentWidth": 70'] {
width: 70%!important;
.content {width: 100%!important;}
}
[data-current-styles*='"customContentWidth": 51'] {
width: 50%!important;
.content {width: 100%!important;}
}
[data-current-styles*='"customContentWidth": 33'] {
width: 33.33%!important;
.content {width: 100%!important;}
}
@media screen and (max-width: 800px) {
#siteWrapper & section.page-section {width: 100%!important;}
 }
}
//-- Floating Social Links
@media only screen and (min-width:640px){
footer{
  .sqs-svg-icon--wrapper{
    display: block !important;
    margin: 20px 10px !important;
  }
  .socialaccountlinks-v2-block{
    position: fixed !important;
    top: 30% !important; 
    /* Adjust this percentage to move the icons up or down */
    right: 5px !important;
    z-index: 99 !important;
  }
}
}
/*===Full width Instagram ===*/
section[data-section-id="61a40048e0deb77695c8bf7a"]  {
min-height: initial!important;
.content-wrapper {
padding: 0!important;
max-width: 100%;
}
.sqs-row .sqs-block.instagram-block{
padding: 0!important;
.sqs-video-wrapper.video-fill {
position:relative;
 }
}
.sqs-layout > .sqs-row {
margin: 0!important;
 }
}

Option 1. Add a Blank section on top then use CSS to set its height about 100px

Option 2. Add this to Design > Custom CSS

@media screen and (min-width:992px) {
[data-section-id="61e645de8a934c7aa67c938c"] {
    margin-top: 30vh;
}
}

Thank you so much!!! You're a life saver!!!🎉