Padding AtlassianNavigation?

I’m wondering if it’s possible to push over the secondary items in a AtlassianNavigation component to match the side padding on my pages of 40px?

it currently looks like this: https://i.imgur.com/GPAn90X.png

and this is what i ultimately need:

       <AtlassianNavigation
          label="site"
          moreLabel="More"
          primaryItems={DefaultPrimaryItems}
          renderProductHome={ProductHomeExample}
          renderHelp={HelpExample}
          renderSettings={DefaultSettings}
          renderSignIn={SignInExample}
        />
  const DefaultProfile = () => {
    return (
      <Link to="/profile">
        <img
          alt="avatar"
          style={{ borderRadius: '50%', width: 24, height: 24 }}
          src={avatarUrl}
        />
      </Link>
    )
  };