Text content overflow its element tag

Here’s the code. It’s in Angular if that has something to do with it. The actual text height is overflowing the element that contains it.

html

<p id="website-title">Poll App</p>

css

#website-title {
    text-align: center;
    // font-family: "Roboto-Mono";
    font-size: 50px;
    margin: 0;
    position: absolute;
    top: 50%;
}

result
result

I want the element to be the height of the content. Any ideas? thx.