Fix alignment for notifications count

src/styles/_notifications.sass

@@ -6,14 +6,13 @@
 
 	& #notifications-refresh,
 	& #notifications-markallread
-		float: right
 		color: $color-primary
 		cursor: pointer
-		padding: 8px 10px 0 10px
-		margin: 0
+		float: right
+		font-family: $font-body
 		height: initial
-		font:
-			family: $font-body
+		margin: 0
+		padding: 8px 10px 0 10px
 
 		text:
 			shadow: none
@@ -21,54 +20,53 @@
 
 		&:hover, &:focus
 			color: lighten($color-primary, 10%)
+
 		&:active
 			color: $color-secondary
 
 #notifications-toggle
-	font-size: 1.5em
 	cursor: pointer
+	font-size: 1.5em
 	position: relative
 	user-select: none
 
-	& .flyout-hat
-		width: 0
-		height: 0
-		position: absolute
+	.flyout-hat
+		border-color: transparent transparent white transparent
 		border-style: solid
 		border-width: 0 8px 8px 8px
-		border-color: transparent transparent white transparent
 		bottom: -15px
+		height: 0
+		position: absolute
 		right: 22px
 		visibility: hidden
+		width: 0
 
 	&.active
-		& .flyout-hat
+		.flyout-hat
 			visibility: visible
 
 	#notifications-count
-		opacity: 0
-		position: absolute
-		top: 10px
-		right: 14px
-		width: 18px
-		height: 18px
+		align-items: center
 		background-color: $color-secondary
 		border-radius: 50%
-		text-align: center
 		color: white
-		font-size: .5em
+		display: flex
 		font:
+			size: .5em
 			weight: bolder
 			family: sans-serif
+		height: 18px
+		justify-content: center
+		opacity: 0
 		padding: 0
-		user-select: none
+		position: absolute
+		right: 14px
+		text-align: center
+		top: 10px
 		transform: scale(0)
 		transition: transform 250ms ease-in-out
-
-		span
-			position: relative
-			top: -2px
-
+		user-select: none
+		width: 18px
 
 		&.bloom
 			opacity: 1
@@ -77,8 +75,8 @@
 
 #notifications-list
 	list-style-type: none
-	padding: 0 5px
 	margin: 0
+	padding: 0 5px
 
 	& .nc-item, & .nc-loading
 		position: relative