Coding Issue With Header

Hey guys,

I've never posted a question in the forum before, but no amount of googling seems to help. I've been customizing my website by using some code. I have no idea what I'm doing, so I've just been following YouTube videos and articles. I've finally got everything figured out and I'm happy with the site, except that on the top page, you can just see the very bottom of some code peeking out.

I'm attaching a screenshot as well as the code that's currently embedded into my CSS. I'm positive that my code is a mess since I've Frankensteined it from the internet, but I did the best I could with my very limited understanding.

(The logo on this particular page won't be showing like that once I update the image on the page lol)

My current CSS:

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 3;
@actionSize: 50px; 
@logoSpacing: 1vw;

//Width at which nav will stack
@media screen and (min-width:1920px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
/**
.products.collection-content-wrapper .nested-category-children {
  display:none;
}
.product-quantity-input {
    margin-top: 30px;
}
.search-input {   background-color: #dfdfdf !important; }
.sqs-search-page-input input {color: #000000}
/* Nav item hover color - underline */
.header-nav-item a:hover {
    color: #bd7660;
}
 * Switch Order of Product
 * Details using
 * Simple Layout
#page .ProductItem-details-checkout {
  display: flex;
  flex-direction: column;

  /* Set Orders */
  .ProductItem-details-excerpt {
    order: 5;
  }
  .product-variants {
    order: 2;
  }
  .product-quantity-input {
    order: 4;
  }
  .ProductItem-product-price {
    order: 1;
  }
  .sqs-add-to-cart-button-wrapper {
    order: 3;
  }

  @media (max-width: 767px) {
    .ProductItem-details-excerpt {
      order: 5;
    }
    .product-variants {
      order: 2;
    }
    .product-quantity-input {
      order: 4;
    }
    .ProductItem-product-price {
      order: 1;
    }
    .sqs-add-to-cart-button-wrapper {
      order: 3;
    }
  }
}

The cause is not from the code in Custom CSS, but it is from another position.

Try checking your Code Injection (Website > Website Tools > Code injection)

or Page Header Code Injection (page where you see problem)

and send all code there, we can check easier.

Okay, that makes sense. 

This is the code injection for the shop page (the only page I'm having this issue on).

.products.collection-content-wrapper .nested-category-children {
  display:none;
}
*/
/**
 * Switch Order of Product
 * Details using
 * Simple Layout
**/
#page .ProductItem-details-checkout {
  display: flex;
  flex-direction: column;

  /* Set Orders */
  .ProductItem-details-excerpt {
    order: 5;
  }
  .product-variants {
    order: 2;
  }
  .product-quantity-input {
    order: 4;
  }
  .ProductItem-product-price {
    order: 1;
  }
  .sqs-add-to-cart-button-wrapper {
    order: 3;
  }
}

CSS code in Page Injection, you need to wrap in <style> enter css code </style> tag, unless it will appears as a text

You can remove these above code.

That fixed it! Thank you so much!