Text is clickable outside

Issue

Hello I have the following structure and Hello World is outside of the text clickable on the right side.

It has something to do with the display: block; but I need that part of a code. How can I fix that?

#footer-text {
    display: block;
}

<section id="">
    <div class="">
        <div>
            <a href="" id="footer-text">Hello World</a>
        </div>
    </div>
</section>

Solution

The display property's block value instructs the browser to render the element as a rectangular box that automatically expands to take up the full width available in its parent container.

To limit the width of a block-level element while keeping the block display property, use max-width: fit-content to ensure the element does not exceed the width of its content.

#footer-text {
    display: block;
    max-width: fit-content;
}

<section id="">
    <div class="">
        <div>
            <a href="" id="footer-text">Hello World</a>
        </div>
    </div>
</section>

Answered By - George