Why I can click outside the button's width in my HTML and CSS code?

I am struggling to fix a problem in my HTML code, so I made a nice looking button using div command, class attribute and editing it in CSS, but the problem is I can click outside the width of the button, and it works, it opens the link, I can’t see the button, I mean I can see it but it’s width 300px not long as the screen, any help will be appreciated, thanks.

Here’s the HTML code just in case needed.

<a href="https://youtu.be/rMLzeRghtvY">
        <div class="rb">
            <h3>
                Razer Blade 14
            </h3>
        </div>
    </a>

Here’s the CSS code.

.rb {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    transition: 0.25s;
    border-style: inset;
    border-color: #00ff00;
    width: 100%;
    max-width: 800px;
    pointer-events: none;
}

.rb:hover {
    background-color: #222222;
    transition: 0.25s;
    border-color: #00cc00;
}

h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 72px; color: #00ff00;
    text-align: center;
}

I tried making a button that will take me to an youtube link when clicking it, but the problem is I can click outside the width of the button, for the height it’s fine, I can only click inside the height of the button but the clickable width is really long but the visual width is just 800px.