Spacing between text issue: Dawn theme

[SohumLinen]

Hello Everyone,

I implemented a code to have a sliding navigation bar for the mobile version below the header in my website by watching an online video.

However, I am stuck in one problem. The spacing between the contents of the navigation is evenly spaced out and thus is not getting dynamically adjusted by the length of the text entered. 

Can someone please help me with a code as to how can I space the content based on the text size of each word.

Any help is highly appreciated. 

 

Website link- sohumlinen.com

Here is the HTML & CSS Code used to obtain this section:

<div class="isolate">
  <div class="rich-text content-container color-background-1 gradient rich-text--full-width content-container--full-width section-template--15916051136687__4ee8c15b-7951-40a3-a2b5-293667b315ab-padding">
    <div class="rich-text__wrapper rich-text__wrapper--left">
      <div class="rich-text__blocks left"><div class="rich-text__text rte">
                <div class="sldOuter">
    <div class="sldRow pb15">
       <div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/collections/bed-linen">Bedsheets</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/collections/bath-linen">Towels</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/collections/switchbot">Switchbot</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/wholesale">Wholesale</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/switchbot">SwitchBot</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/switchbot">SwitchBot</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/switchbot">SwitchBot</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/switchbot">SwitchBot</a></p>
</div>
       </div>
<div class="sldCol3_half">
          <div class="sldImgBox">
            <p><a href="https://sohumlinen.com/switchbot">SwitchBot</a></p>
</div>
       </div>
         
    </div>
 </div>
              </div></div>
    </div>
  </div>
</div>

Css:

.sldOuter {
    width: 100%;
    overflow: hidden;
}.pb15 {
    padding-bottom: 0px !important;
}.sldRow {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s ease;
    padding-bottom: 0;
    position: relative;
}.sldCol3_half {
    padding: 0 0px;
  padding-left: 20px;

    display: inline-block;
    vertical-align: top;
    width: 28%;
}.sldImgBox {
    width: 100%;
  margin-bottom: -10px;
  margin-top: -15px;
  text-decoration: none !important;
    height: auto;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}.sldImgBoxInner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-position: 50%;
    background-repeat: no-repeat;
}.sldImgBoxInner.sldImgOpcty {
  border: none !important
    opacity: 1;
}.sldImgBoxInner img {
    width: 100%;
    height: 100%;
    display: block;
}