Unexpected line at the top of the page

On my site, I added a menubar which is the following code:

<header class="site-header">
            <div class="container">
                <div class="site-header-inner">
                    <div class="header-links">
                        <ul>
                            <li>
                                <a href="#">Contact</a>
                            </li>
                            <li>
                                <a href="#">About us</a>
                            </li>
                            <li>
                                <a href="#">FAQ's</a>
                            </li>
                            <li>
                                <a href="#">Support</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

and these are my other css stuff:

_header.scss:

.site-header {
    position: relative;
    padding: 24px 0;
    z-index: 2;

    &::before {
        content: '';
        position: absolute;
        top: -140px;
        right: -100px;
        width: 1440px;
        height: 324px;
        background-image: url('../images/header-illustration-light.svg');
    }
}

.site-header-inner {
    position: relative; /* To display all elements above the background color */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-links {
    display: inline-flex;

    li {
        display: inline-flex;
    }
}

I am trying to achieve to remove the line at the top of the page permanently. The menubar is transparent, so that wouldn't be a problem.

This is what the site looks like

Thanks for your answers, Eric.