diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 977efa829..c969f3e4d 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -252,6 +252,10 @@ StScrollBar StButton#vhandle:active {
     icon-size: 1.09em;
 }
 
+.popup-battery-percentage {
+    padding-left: 24px;
+}
+
 /* Switches */
 .toggle-switch {
     width: 65px;
diff --git a/js/ui/status/power.js b/js/ui/status/power.js
index 83d455112..619b02b30 100644
--- a/js/ui/status/power.js
+++ b/js/ui/status/power.js
@@ -61,7 +61,7 @@ const Indicator = new Lang.Class({
         this._primaryDeviceId = null;
 
         this._batteryItem = new PopupMenu.PopupMenuItem('', { reactive: false });
-        this._primaryPercentage = new St.Label();
+        this._primaryPercentage = new St.Label({ style_class: 'popup-battery-percentage' });
         this._batteryItem.addActor(this._primaryPercentage, { align: St.Align.END });
         this.menu.addMenuItem(this._batteryItem);
 
@@ -183,7 +183,8 @@ const DeviceItem = new Lang.Class({
         this._box.add_actor(this._label);
         this.addActor(this._box);
 
-        let percentLabel = new St.Label({ text: C_("percent of battery remaining", "%d%%").format(Math.round(percentage)) });
+        let percentLabel = new St.Label({ text: C_("percent of battery remaining", "%d%%").format(Math.round(percentage)),
+                                          style_class: 'popup-battery-percentage' });
         this.addActor(percentLabel, { align: St.Align.END });
         //FIXME: ideally we would like to expose this._label and percentLabel
         this.actor.label_actor = percentLabel;