Horizontal Overflow Options

[ElConejo]

Hello. I am creating a website and I have looked over my CSS. I have found that Horizontal Overflow is being applied whenever any element exceeds the height of a browser window. I can't find anything in my code that would cause that. I was hoping a second pair of eyes would help me. Thank you.

CODE

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");
@import url('https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/inter.css');

#fixed-header {
    height: 0.5in; /* Adjust height as needed (0.5in is approx. 12px) */
    position: fixed; /* Sticks to the top of the viewport */
    top: 0;
    left: 0;
    width: 100%; /* Expands to full viewport width */
    background-color: #e6e2e8; /* Customize background color */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-bottom: 1px solid #ddd; /* Add a 1px light gray border at the bottom */
    display: flex;
    justify-content: space-between; /* Distributes elements evenly */
    align-items: center; /* Vertically aligns elements in the center */
  }

.logo-container {
  padding: 0.5em;

}

.logo-container a {
    text-decoration: none;
    color: black;
  }

.right-mission {
  padding: 0.5em;
  text-align: right;
  font-style: italic; /* Optional styling for "Honesty is our mission" */
}

.right-mission h1 {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: larger;
}

.overlapping-image {
  position: absolute;
  top: 280%; /* Adjust the vertical position as needed */
  left: 50%; /* Adjust the horizontal position as needed */
  transform: translate(-50%, -50%); /* Center the image */
  width: 2in;
  height: 2in;
  z-index: -1; /* Ensure the image overlaps the content below */
  border-radius: 50%;
}

nav {
  display: flex;
  align-items: center;
}

nav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: transparent;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Adjust position based on your design */
  left: 0;
  background-color: transparent; /* Set to transparent instead of #fff */
  box-shadow: none; /* Remove box-shadow completely */
  padding: 0.5rem;
}

.dropdown-menu li a {
  display: block;
  padding: 0.5rem;
  background-color: #fff;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
  .header-image {
    width: 100%; /* Make image full width for mobile */
  }
}

.carousel {
  max-width: 500px; /* Maximum width for larger screens */
  min-height: 300px; /* Minimum height for all screens */
  width: 100vw; /* Fill remaining viewport width while respecting min-height */
  overflow: hidden;
  position: relative;
  margin: 0 auto; /* Center horizontally */
  margin-top: 20em; /* Maintain top margin */
  z-index: 2; /* Place behind header when scrolled down */
}

.carousel.hidden {
  z-index: 1; /* Hide carousel behind header when scrolled */
  display: none; /* Optionally hide carousel completely */
}

.carousel img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  margin-bottom: 5em;
}

.carousel img.active {
  opacity: 1;
}

/* Smaller screens adjustments */

@media only screen and (max-width: 768px) {
  .carousel {
    max-width: 70%; /* Adjust maximum width for medium screens */
  }
}

@media only screen and (max-width: 480px) {
  .carousel {
    max-width: 90%; /* Adjust maximum width for small screens */
  }

}

.grid {
  display: grid;
  grid-template-columns: 1fr; /* One column, full width */
  width: 100vw; /* Span the viewport width */
  margin: 0 auto; /* Center horizontally */
}

/* Optional responsive styles */

@media only screen and (max-width: 768px) {
  .grid {
    padding: 0 15px; /* Add some padding on smaller screens */
  }
}

@media only screen and (max-width: 480px) {
  .grid {
    font-size: 0.8rem; /* Adjust font size for smaller screens */
  }
}

.subheading {
  font-family: "Brush Script MT", Brush Script Std, cursive;
  text-align: center;
  /* Additional styles like font-size, color, etc. */
}

.centered-text {
  text-align: center; /* Center the text horizontally */
  word-wrap: break-word; /* Enable word wrap for long lines */
  max-width: 100%; /* Stretch to full container width */
  
  @media (max-width: 768px) { /* Adjust styles for smaller screens */
    font-size: 16px; /* Reduce font size for better mobile readability */
  }
}

.centered-icon {
  display: block; /* Ensure the icon element acts as a block-level element */
  margin: 0 auto; /* Center the icon horizontally */
  max-width: 100%; /* Stretch the icon to full container width while remaining responsive */
  
  @media (max-width: 768px) { /* Adjust styles for smaller screens (adjust breakpoint as needed) */
    max-width: 50%; /* Adjust maximum width for better mobile viewing */
  }
}

.empty-section {
  height: 7em;
  width: 100vw;
  overflow: hidden;
}

Thank you in advance for any help that you can provide.