Brand icon area too large in third header example

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The brand icon area is too large in the third header example from 769px breakpoint:

1. The visible focus outline is very large when one's using the keyboard to navigate.
2. The clickable area where one's using the mouse to navigate is very large. One can click on it without even noticing.

Reduced test cases

Can be seen directly in the documentation: https://getbootstrap.com/docs/5.3/examples/headers/.

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.2