Ul off-centered?

Hey guys, I found out that ul’s have default styling for chrome and I tried to add list-style-position: inside but it didn’t really fix it. A horrible tacky way would be to move the margin, but why does this happen?

Here is the return on the component:

  return (
    <div>
      <div className="page-sub-title">Site Users: Page {pageNumber}</div>
      <div className="site-users-list-container">
        <ul className="site-users-list">
          {data.users.map((user) => {
            return (
              <li key={user.id}>
                <div className="user-info">
                  <p>
                    ID: <span className="user-id">{user.id}</span>
                  </p>
                  <p>
                    <span className="user-username">{user.username}</span>
                  </p>
                  <p>
                    <span className="user-role">{user.role}</span>
                  </p>
                </div>

                <div className="admin-btns-container">
                  <button disabled>User's Profile</button>
                  <button
                    className="secondaryBtn"
                    onClick={async (e) => {
                      e.preventDefault();
                      const response = await removeUser({
                        variables: {
                          id: user.id,
                        },
                      });

                      if (response) {
                        alert(`Removed User:${user.username} ID:${user.id}`);
                      }
                    }}
                  >
                    Delete User
                  </button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>

      <div className="userlist-btn-container">
        {skipUsers !== 0 ? (
          <button
            className="commonBtn"
            onClick={() => handleClick('admin', 0, 12)}
          >
            Prev
          </button>
        ) : (
          <div />
        )}
        {data.users.length === 12 ? (
          <button
            className="commonBtn"
            onClick={() => handleClick('admin', 12, 12)}
          >
            Next
          </button>
        ) : (
          <div />
        )}
      </div>
    </div>
  );

Lists have default margin and padding: unless you remove/modify these, they’ll apply. It is not tacky at all to modify them – they’re just defaults.

I would make just an unordered list with a load of text in it on CodePen. Start by removing padding and margin from ul and li (or in CSS settings, select that you want a reset applied). Then add the properties back in with different values to see what the effects are. Then adjust things like the list style. That way you’ll get an idea of how margin and padding applied to the list itself and the list items has different effects.