How to align one list element right while keeping the rest centered?

Question

I have a centered footer on a website with navigational links, and a copyright notice. I would like to keep the copyright notice on the same line as the navigational links.

HTML:

    <div id="footer">
    <p>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="disclaimer.html">Disclaimer</a></li>
        <li><a href="safety.html">Safety</a></li>
        <li><a href="privacy-policy.html">Privacy Policy</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul>
        <li class="copyright">&copy; 2020 Company LLC</li>
    </ul>
    </p>
</div>

CSS:

copyright {
    float: right;
}

ul {
    display: inline-block;
    vertical-align: middle;
}

With this code, navigation links and copyright appear on the same line. However, the copyright is not positioned right and it appears scrunched. A thin white line appears to the bottom of the footer, which should not be there either. The three buttons at the top are center aligned for reference.

I would like to align the copyright on the right of the footer and center align the navigation links to the webpage. What am I missing here?