scelawrence

Site URL: https://www.gorsecottage.co.uk/
Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!)
When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it.
Can't seem to find a workaround since it's an interference rather than a setting, can anyone help?
The web page: https://www.gorsecottage.co.uk/
This is the code:
<script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script>
<div><div id="lodgify-search-bar" data-website-id="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true">
  </div>
  <style type="text/css">
  html {
    --lodgify-ui-action-color: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>