ul.twocolumn {
width: 400px;
}

ul.twocolumn li {
width: 190px;
float: left;
}

/* Ensure the logo container doesn't overflow */
.header-logo {
  max-width: 100%;
  overflow: hidden;
  text-align: center; /* Center the logo on smaller screens */
}

/* Make the image responsive */
.header-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Address layout for small screens */
@media (max-width: 768px) {
  .header {
    padding: 10px; /* Add some padding to the header for spacing */
  }
  .header-logo img {
    max-width: 80%; /* Shrink the logo slightly for small screens */
  }
}
/* Full-size logo on desktop */
@media (min-width: 1024px) {
  .header-logo img {
    width: 400px; /* Use the original width from your HTML */
    height: auto; /* Maintain aspect ratio */
  }
}