Search Box Padding

Hey everyone,

I’m a bit new to this and need some help. I’ve integrated Algolia Search into a backup theme on my website, but the search box isn’t displaying correctly. Could someone guide me on where and what I might need to modify to fix this issue?

Thanks in advance for your help!

Jess

Resolved with;

<style>
        .search-container {
            position: relative; /* Ensure container positioning is appropriate */
            width: 100%; /* Adjust width as necessary */
            display: flex; /* Use flexbox for better layout control */
            justify-content: center; /* Center the search box */
            align-items: center; /* Center the search box vertically */
            padding: 10px; /* Add padding to the container */
        }

        input#autocomplete-0-input {
            margin: 5px !important;
            padding: 5px !important;
            width: calc(100% - 12px); /* Adjust width to account for padding */
            box-sizing: border-box; /* Ensure padding and border are included in width and height */
            position: relative; /* Adjust positioning if necessary */
            z-index: 1; /* Ensure it appears above other elements if needed */
            border: 1px solid #ccc; /* Add a border to match the outline */
        }
        input.ais-SearchBox-input {
      bottom: 5px;
      position: relative;
      border: unset !important;
  }
</style>