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

Example on: https://getbootstrap.com/docs/5.3/forms/form-control/#example

screen: (red border added by me to highlight issue more clearly)

The code block has a 30px right-margin. I assume this is because the CSS rule used:

@media (min-width: 992px)
.highlight pre {
  margin-right: 1.875rem;
}

This CSS is also used for .bd-code-snippet where there is no preview above and the code doesn't want to get in the way of the copy to clipboard button so it makes sense there.

Perhaps a quick easy fix could be to overrule the above, just for the examples.

.bd-example-snippet .highlight pre {
  margin-right: 0;
}

If you agree I'd be happy to make a quick PR.

Reduced test cases

see above:

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

Windows

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

Microsoft Edge

What version of Bootstrap are you using?

v5.3.2