Navigation bar changed and I cant edit it

Site URL: https://www.sketchstudio.co.za/

My site header randomly changed from what it used to look like and I am not able to change it back or edit it

the top image is what it used to look like and the bottom one is what it looks like now with the red text squashed in the side. Here is the custom CSS currently used on my site. 

.Marquee * {
   color:black!important;
  
  }

// SLIDESHOW GALLERY BEHIND HEADER NAV 
.gallery-section{padding-top:0px!important;}

.gallery-fullscreen-slideshow-item-wrapper{
    position: realtive!important}

.gallery-fullscreen-slideshow-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/65b7421ac1e2d52e89ab376c/t/65cf4950831994083c85b733/1708083537988/Sketch+logo+Web-02.png)!important;
    background-size: contain;
    position: absolute;
    width: 700px;
    height: 400px;
    top: 25%;
  left : 26%;
 
 
  
}

//mobile gallery//
@media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{
    position: realtive!important}
  .gallery-fullscreen-slideshow-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/65b7421ac1e2d52e89ab376c/t/6710d20bb74a994362de58f6/1729155596884/scape+banner_web5-02.png)!important;
    background-size: contain;
    position: absolute;
    width: 550px;
    height: 220px;
    top: 30%;
    left: 5%;
}
}

body.homepage header#header img {
	visibility: hidden;
}

/* hide burger */
.burger-inner {
	visibility: hidden;
}

section[data-section-id="65e032ddddd40d35894bd955"]
.section-background img {
    position: fixed !important;
}

/* Fix footer */
footer#footer-sections {
    position: relative;
    z-index: 999999999999999;
}

//fugazzi home//

/* Image hover */
section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block:hover img {
    transform: scale(1.3);
    transition: all 0.3s ease;
}
section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block img {
    transition: all 0.3s ease;
}

section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block:hover img {
   filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}


section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block.img {
    
}
section[data-section-id="65e032ddddd40d35894bd955"]
div.image-block::hover img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

//DROPDOWNN MENU//
.header-nav-folder-content{background-color:#DDD7D3!important}

.header-nav-folder-content a {border-bottom:2px solid #FFFFFF}

.header-nav-folder-content a {padding-bottom:.4rem!important; }

.header-nav-folder-content a {padding-top:.4rem!important; }

.header-nav-folder-content a {color: #FFFFF!important;}

.header-menu-nav-item a {
font-size: 20px;
text-align: left;
padding-bottom:.8rem!important;
padding-top:.8rem!important;
border-bottom:2px solid #DDD7D3
}

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
}
//NAVIGATION//
.header-nav a:hover {
  font-weight: bold }

#page {
overflow-x:hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}

@media only screen and (min-width:768px) {
.gallery-grid-wrapper .gallery-grid-item {
min-width: 15%;
margin-bottom: 3%;
margin-top: 3%  
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -235%; }
}
}


@media only screen and (max-width:767px) {
.gallery-grid-wrapper .gallery-grid-item {
min-width: 25%;
margin-bottom:8%;
margin-top: 8%  
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -425%; }
}
}

Hi @Leanie. Did you fix it already, or did you just remove the code? I took a look at your website and didn't see any issues. I also tested the code on my site, and everything worked perfectly, as you can see from the attached screenshots. Let me know:)