Have a nightmare! My bosses won’t approve this page until the issue is fixed and I’m at a total loss!

Issue 1
There are huge spaces appearing between each block on the event page? I haven’t added spaces and I checked the source code and there doesn’t seem to be anything in the code yet on the live page, there is a space between each heading the size of the goddam moon!

Issue 2
Under the event title on the “by” I can attribute an organiser to the event. It just says “by” and then nothing but the page views. I need this to say the event organiser or simply our company name? I have set up organisers in the backend so they are just sat there.

I recorded a loom- my laptop is overloaded to hell so its slow but it will demonstrate my issue. https://www.loom.com/share/fe9b845045a043fc850de15a58c7b0ea

Any help or advise would be great appreciated! Thanks a million!

<div id="errorArea">
    <p>You have the following error(s):</p>
    <ul>
        Your start and/or end time comes before the allowed Start Date to reserve. Please return to the time selection page and try again.<br>
        Your form data has been saved. When you choose a new time, your form will retain the information you have already
        filled out.
    </ul>
</div>

to:

<div id="errorArea">
    <p>You have the following error(s):</p>
    <ul>
        <li>Your start and/or end time comes before the allowed Start Date to reserve. Please return to the time selection page and try again.</li>
        <li>Your form data has been saved. When you choose a new time, your form will retain the information you have already filled out.</li>
    </ul>
</div>

With this CSS added:

style.css:

ul {
    list-style-position: inside
}

Thanks in advance for any help!

Its at www.opticbonbons.com

and I made a twitter account for it too:
opticbonbons

I’m short on followers, actually veeeerrryyy short on followers so please feel free to follow me.
thank you!