Cannot overwrite justify-content using Javascript

Question

I am trying to overwrite a Flex 'justify-content:center' rule and change it to 'start-flex' using Javascript. For some reason this isn't working although within the same JS loop I can overwrite any of the other rules. Why is justify-content acting differently and how could you actually overwrite justify-content ?

function myFunction()
{
  const links = document.querySelector( '.sidebar-nav' ).querySelectorAll( 'li a' );
  
  links.forEach( function( item ){
    item.justifyContent = 'flex-start';
  });

}

aside{
  display: flex;
  flex-direction: column;
  width: var(--edge-side);
  padding-top: 4rem;
}

.sidebar-nav li{
  display: flex;
  align-items: stretch;
  height: 60px;
  width: auto;
}

.sidebar-nav li a{
  display: flex;
  justify-content: center;    
  align-items: center;
  width: 100%;
}

  <aside>
    <nav>
      <ul class="sidebar-nav">
        <li><a href="#">
          <span class="material-icons">apps</span>
          <span class="page-name">Page 1</span></a></li>
        <li><a href="#">
          <span class="material-icons">reorder</span>
          <span class="page-name">Page 2</span></a></li>
      </ul>
    </nav>
  </aside>

Answer 1

You need to set .style.justifyContent.

function myFunction() {
  const links = document.querySelector('.sidebar-nav').querySelectorAll('li a');
  links.forEach(function(item) {
    item.style.justifyContent = 'flex-start';
  });
}
myFunction();

aside {
  display: flex;
  flex-direction: column;
  width: var(--edge-side);
  padding-top: 4rem;
}

.sidebar-nav li {
  display: flex;
  align-items: stretch;
  height: 60px;
  width: auto;
}

.sidebar-nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

<aside>
  <nav>
    <ul class="sidebar-nav">
      <li>
        <a href="#">
          <span class="material-icons">apps</span>
          <span class="page-name">Page 1</span></a>
      </li>
      <li>
        <a href="#">
          <span class="material-icons">reorder</span>
          <span class="page-name">Page 2</span></a>
      </li>
    </ul>
  </nav>
</aside>