Demo: CSS scroll-margin-inline

<div class='container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item' id='target'>Item 3 (Scroll to me)</div>
  <div class='item'>Item 4</div>
  <div class='item'>Item 5</div>
</div>
<button onclick="document.getElementById('target').scrollIntoView({ behavior: 'smooth' });">Scroll to Item 3</button>

.container {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.item {
  padding: 20px;
  border: 1px solid #000;
  margin: 10px 0;
}

#target {
  scroll-margin-inline: 20px;
  background-color: yellow;
  margin: 10px 0;
}

// No JavaScript required for this demo