Calcite Web: Calcite Grid System Column 24 Width Adjustment

[arahman_mdmajid]

I am using Calcite web for creating a navbar, and my code goes as follows. 

<div class="grid-container" style="all: unset;">
	<div class="column-24">
	  <!-- desktop sized navigation -->
	  <div class="tablet-hide">
		<!-- logo / home -->
		<img class="esri-logo">
		<span class="top-nav-title">Title Here</span>
		<!-- primary navigation sections -->
		<nav class="top-nav-list" role="navigation" aria-labelledby="topnav">
		  <a class="top-nav-link" (click)="showTool1()">Tool 1</a>
		  <a class="top-nav-link" (click)="showTool2()">Tool 2</a>
		  <a class="top-nav-link" (click)="showTool3()">Tool 3</a>
		</nav>
		<!-- user specific dropdowns -->
		<nav class="top-nav-list right" role="navigation" aria-labelledby="topnav">
			<a class="top-nav-link icon-ui-user" href="#">Sign In</a>
			<a class="btn btn-clear" href="#" style="margin-right: 5px; margin-top: 10px;">Sign Up</a>
		</nav>
	  </div>
	</div>
</div>

The resulting base is as follows.

As you can see (sorry for the small picture), the sign-in and sign-up options appear in the middle of the page and not in the left-hand corner (dir is equal to RTL for Arabic). After inspecting the element, it shows that the width for column 24 class property is set as shown below,

.column-24 {
    width: 1440px;
    max-width: 96vw;
}

If I set the width to 100%, it moves to the maximum width, i.e., 1843px, and not to the corner of the page.

How can we expand it further and move it to the end of the page and make it adjustable as the page resizes?