Custom CSS for gallery controls

Site URL: https://www.buildingnarratives.co.uk/

Hi,

My query refers to the gallery controls on the bottom left. I have set a width value of 80px for the block. I would like the same number of image numbers to display on each row.

Here's an example of the appearance I'd like to achieve on another site:

http://rory-gardiner.com/

This is all the CSS pertaining to the gallery controls that I already have imputed:

#numberControls.gallery-controls {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 80px;
  height: auto;
  font-family: 'aktiv-grotesk';
  font-size: 12px;
  line-height: 1.75em;
  font-weight: 100 !important;
}
.number.sqs-active-slide {
  background: #1F1F1F;
  font-style: normal;
}
.number {
  font-size: 1em; 
  padding-left: 1px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  padding-right: 0px !important;
  margin-right: 3px !important;
  margin-left: 0px !important;
} 

As the margin and padding lines in ".number" work, I thought it just a be a matter of adding 'width: 12px;' to that section would do the trick. But no change. Can anyone show me where I'm going wrong?

Thanks,

Nick