Reduce padding-left in stacked tabs

Question

I have this tab structure, based on jquery-ui.

Using an bit of css

.ui-tabs-vertical {
    /* width: 55em; */
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 11em;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 4px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; }

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
}
/*
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
}
*/
.ui-tabs .ui-tabs-nav {
    background:#FFFFFF !important;
    border: none;
}

In this code

<?php
$menu_array = array
  (
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-door-open"></i></span> Introductie',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-shield-alt"></i></span> Beveiliging',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-cog"></i></span> Instellingen',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fa fa-user"></i></span> Gebruikers',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-keyboard"></i></span> Invoer',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-bars"></i></span> Menu',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-phone-volume"></i></span> Terugbelverzoeken',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-wrench"></i></span> Taken',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fa fa-building"></i></span> Relatiebeheer'
  );

?>

  <main id="main">

    <section id="about" class="about">

      <div class="container">

          <div class="col-lg-12 d-flex flex-column justify-content-center about-content">



            <div id="tabs" style="border: none;">

              <div class="row">
                  <div class="col-lg-2">
                      <ul>

                        <?php foreach($menu_array as $menu) { $i++; echo '<li><small><a href="#page_'.$i.'"><span style="display:inline-block; width:145px;">'.$menu.'</span></a></small></li>'; } ?>
                      </ul>
                  </div>

                  <div class="col-lg-10">

                     <?php foreach($menu_array as $menu)
                     {
                         $j++;

                         echo '<div id="page_'.$j.'">';
                         include('includes/portfolio_torza/page_'.$j.'.php');
                         echo '</div>';
                     }
                     ?>

                 </div>

            </div>

          </div>

      </div>
    </section>

  </main><!-- End #main -->

I would like to reduce the space between the border an the icon on the left side, to get this result

How to achieve this?

(I am using width:25px; text-align:center;" to center all icons and have them in one vertical line)

Answer 1

Update

For your anchors, add the following CSS:

padding-left: 0;
width: 100%;

You already have existing padding rules for the following rule: .ui-tabs .ui-tabs-nav .ui-tabs-anchor {...}. To override it, you could change the padding-left there or add a new rule after it.

In your case:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  padding-left: 0;
  width: 100%;
}

Result

---

You need to remove the left padding of the ul itself. This screenshot represents the default browser styles for unordered lists.