Have <a href=> list scroll and overflow all in the same row

Question

I have a few headers which I'd like scrolling and I have added overflow auto & white-space nowrap but it's not working and I am not sure what to do.

I am trying to create some headers with content within so I am able to create some hyperlink to specific parts of the website. I think all the code and all the part of hyperlinking so I can access an specific part of the page (Header2 for example) from another pages is all done but I am having problems by having all the content in the same line (specially for mobile devices)

This is how the Headers look like now: ! https://ibb.co/xhtXHF4

And this is how I would like the Headers to look like, with a scroll bar but all in the same line:! https://ibb.co/DLyzN0J

Now I have added into my code the overflow:auto & white-space:nowrap but it is not working and I am not sure how I can do it to have all the Headers in the same row with a scrolling bar for when the row is too small.

Any suggestions please?

<script type="text/javascript">
    
    $(document).ready(function() {
  $('a').click(function() {
    $('#url').html($(this).prop('href'));
  });
});

</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.pentaho-rounded-panel-bottom-lr {
  display: none;
  overflow: auto;
  white-space: nowrap;
}

div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
  display: block;
}

:target {
  display: block !important;
}

a:link, a:visited{
  background-color: #E1AFB3;
  color: #030303;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  background-color: #C3414D;
}

</style>

<a href="#Header1">Header1</a>
<a href="#Header2">Header2</a>
<a href="#Header3">Header3</a>
<a href="#Header4">Header4</a>

<div id="Header1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="Header1" class="pentaho-rounded-panel-bottom-lr">
    This is the content from Header 1
  </div>
</div>

<div id="Header2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="Header2" class="pentaho-rounded-panel-bottom-lr">
    This is the content from Header 2
  </div>
</div>

<div id="Header3" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="Header3" class="pentaho-rounded-panel-bottom-lr">
    This is the content from Header 3
  </div>
</div>

<div id="Header4" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="Header4" class="pentaho-rounded-panel-bottom-lr">
    This is the content from Header 4
  </div>
</div>

Thank you for the time everyone

Answer 1

You can enclose all the header divs inside a single div and style it like bellow:

#Headers {
  width: 600px; //example
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  overflow-x: scroll;
}

<div id="Headers">
  <div id="Header1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
    <div id="Header1" class="pentaho-rounded-panel-bottom-lr">
      This is the content from Header 1
    </div>
  </div>

  <div id="Header2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
    <div id="Header2" class="pentaho-rounded-panel-bottom-lr">
      This is the content from Header 2
    </div>
  </div>

  <div id="Header3" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
    <div id="Header3" class="pentaho-rounded-panel-bottom-lr">
      This is the content from Header 3
    </div>
  </div>

  <div id="Header4" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
    <div id="Header4" class="pentaho-rounded-panel-bottom-lr">
      This is the content from Header 4
    </div>
  </div>
</div>