How can I use <a href="#element tag"> to scroll to an elements margin, rather than it's border?

I created a horizontal scroll section with html for a project I’m working on, it consists of a div containing four panels I want the viewer to scroll through, and then a div containing 4 anchors which allow the user to quickly scroll between each panel.

The scroll behavior works, but the anchors scroll to the panels border, but I want it to scroll to the panels margin so that the panel is aligned in the center of section. The code is written as so:

HTML:

<section class="learn2build">
    <div class="horizontal-scroll">
      <div class="slide" id="slide1">
        <div class="intro">
          <h2>Start Simple, Create Excellence</h2>
          <div class="summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi ullam magnam vel officiis omnis alias ad libero doloribus accusamus atque! Rem itaque nisi numquam quas veniam temporibus maxime velit atque?</p>
          </div>
          <p>Already know what you want?</p>
          <button>Start Building!</button>
        </div>
        <div class="part-panels">
          <div class="panel">
            <h3>Battery</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam, illo voluptate veritatis sed nulla reprehenderit dolorem molestias ratione animi fugit maxime.</p>
            <img src="assets/ebike-battery.png" alt="battery">
          </div>
          <div class="panel">
            <h3>Controller</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur omnis tenetur temporibus quos enim repudiandae culpa.</p>
            <img src="assets/ebike-controller.png" alt="controller">
          </div>
          <div class="panel">
            <h3>Motor</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nisi ab iste cum consequuntur quos eum neque, eos earum architecto? Autem nobis reiciendis assumenda numquam?</p>
          <img src="assets/ebike-motor.png" alt="motor">
        </div>
        </div>
      </div>
</div>

<div class="nav-section">
      <a href="#slide1"><img src="assets/symbols/fiber_manual_record_FILL1_wght100_GRAD0_opsz24.png" alt="slide 1" class="scroll-dot"></a>
      <a href="#slide2"><img src="assets/symbols/fiber_manual_record_FILL1_wght100_GRAD0_opsz24.png" alt="slide 2" class="scroll-dot"></a>
      <a href="#slide3"><img src="assets/symbols/fiber_manual_record_FILL1_wght100_GRAD0_opsz24.png" alt="slide 3" class=scroll-dot></a>
      <a href="#slide4"><img src="assets/symbols/fiber_manual_record_FILL1_wght100_GRAD0_opsz24.png" alt="slide 4" class="scroll-dot"></a>
</div>
</section>

and then some copy and paste panels for testing.

CSS:

section.learn2build {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(252, 50%, 30%);
    height: 70svh;
    width: 100%;
    overflow-x: auto;
}

div.horizontal-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    align-items: center;
    background-color: hsl(252, 50%, 30%);
    height: 95%;
    overflow-x: auto;
    scroll-behavior: smooth;
}

div.horizontal-scroll::-webkit-scrollbar {
    background-color: transparent;
}

.scroll-dot:hover {
    scale: 1.4;
}

.slide {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80%;
    background: var(--slideGradient);
    border-radius: 15px;
    margin-inline: 20%;
}

I’m using margin-inline on the slide class to create the spacing for each slide because using justify-content breaks the horizontal-scroll container (creates overflow problems) and I found that margin-inline worked better. The only issue is that the scroll anchors I created scroll past the margin of the panels and directly to the border, so the panels are never centered when the user clicks one of the anchors. Is there a way to set the scroll behavior to stop at the elements margin?

I considered that perhaps the anchors stopped at the elements padding, rather than the border, and so I replaced margin-inline with padding-inline but this only stretched my panels to fit the size of the section. This worked in terms of the content being centered when using the anchors, but it doesn’t actually solve my problem because the panels are no longer panels, they’re just large gradient slides with words and pictures.

I considered that creating a div for each panel and then assigning that div a width of 100vw would solve the issue, since then the border of the container div would align with the edges of the viewport, and then centering the panels within their individual divs, which would ensure that the panels are centered whenever the anchors are used. This is a last ditch effort though, I’d rather have the elements dictate the scrolling behavior than create extra divs just for the purposes of scrolling.

>Solution :

You can center it using ‘scroll-margin’ property within the horizontal-scroll container.
The amount of margin to be added to scroll snap area can be set by this property:

div.horizontal-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: center;
  background-color: hsl(252, 50%, 30%);
  height: 95%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20%;
}

.slide {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80%;
  background: var(--slideGradient);
  border-radius: 15px;
  scroll-snap-align: start;
  scroll-margin: 0 10%; /* Add margin to the left and right of the panel */
}