--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -993,17 +993,17 @@ CssRuleView.prototype = {
    * @return {DOMNode} The container element
    */
   createExpandableContainer: function (label, isPseudo = false) {
     let header = this.styleDocument.createElementNS(HTML_NS, "div");
     header.className = this._getRuleViewHeaderClassName(true);
     header.textContent = label;
 
     let twisty = this.styleDocument.createElementNS(HTML_NS, "span");
-    twisty.className = "ruleview-expander theme-twisty";
+    twisty.className = "theme-twisty";
     twisty.setAttribute("open", "true");
 
     header.insertBefore(twisty, header.firstChild);
     this.element.appendChild(header);
 
     let container = this.styleDocument.createElementNS(HTML_NS, "div");
     container.classList.add("ruleview-expandable-container");
     container.hidden = false;

--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -34,17 +34,17 @@ function* testTopLeft(inspector, view) {
       afterRulesNb: 1,
       beforeRulesNb: 2
     }
   );
 
   let gutters = assertGutters(view);
 
   info("Make sure that clicking on the twisty hides pseudo elements");
-  let expander = gutters[0].querySelector(".ruleview-expander");
+  let expander = gutters[0].querySelector(".theme-twisty");
   ok(!view.element.children[1].hidden, "Pseudo Elements are expanded");
 
   expander.click();
   ok(view.element.children[1].hidden,
     "Pseudo Elements are collapsed by twisty");
 
   expander.click();
   ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again");
@@ -124,17 +124,17 @@ function* testTopRight(inspector, view) 
     firstLetterRulesNb: 1,
     selectionRulesNb: 0,
     beforeRulesNb: 2,
     afterRulesNb: 1
   });
 
   let gutters = assertGutters(view);
 
-  let expander = gutters[0].querySelector(".ruleview-expander");
+  let expander = gutters[0].querySelector(".theme-twisty");
   ok(!view.element.firstChild.classList.contains("show-expandable-container"),
      "Pseudo Elements remain collapsed after switching element");
 
   expander.scrollIntoView();
   expander.click();
   ok(!view.element.children[1].hidden,
     "Pseudo Elements are shown again after clicking twisty");
 }

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -241,30 +241,24 @@
   color: inherit;
   border: none;
   margin: 4px 0;
   padding: 3px 4px 2px 4px;
   line-height: inherit;
   min-height: 0;
 }
 
-:root[platform="win"] .ruleview-header,
-:root[platform="linux"] .ruleview-header {
-  margin-top: 4px;
-}
-
 .ruleview-expandable-header {
   cursor: pointer;
 }
 
 .ruleview-expandable-header:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
-
 .ruleview-rule-pseudo-element {
   padding-left:20px;
   border-left: solid 10px;
 }
 
 .ruleview-rule {
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 2px 4px;
@@ -379,48 +373,56 @@
   margin: 0;
 }
 
 .ruleview-rule:not(:hover) .ruleview-enableproperty {
   visibility: hidden;
 }
 
 .ruleview-expander {
-  vertical-align: middle;
-  display: inline-block;
+  position: relative;
+  float: left;
+  left: -38px;
+  top: 1px;
 }
 
 .ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
   /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
   transform: none;
 }
 
 .ruleview-newproperty {
-  /* (enable checkbox width: 12px) + (expander width: 15px) */
-  margin-inline-start: 27px;
+  margin-inline-start: -10px;
+}
+
+.ruleview-enableproperty {
+  position: relative;
+  float: left;
+  left: -38px;
+  top: 1px;
+}
+
+.ruleview-namecontainer {
+  margin-left: -38px;
 }
 
 .ruleview-namecontainer,
 .ruleview-propertyvaluecontainer,
 .ruleview-propertyname,
 .ruleview-propertyvalue {
   text-decoration: inherit;
 }
 
 .ruleview-computedlist {
   list-style: none;
   padding: 0;
 }
 
-.ruleview-computed {
-  margin-inline-start: 35px;
-}
-
 .ruleview-overridden-items {
-  margin: 0px 0px 0px 5px;
+  margin: 0px 0px 0px -33px;
   list-style: none;
   line-height: 1.5em;
 }
 
 .ruleview-overridden-item {
   position: relative;
 }
 
@@ -533,16 +535,17 @@
 }
 
 .theme-firebug .styleinspector-propertyeditor {
   border: 1px solid var(--theme-splitter-color);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 }
 
 .ruleview-property {
+  padding-left: 38px;
   border-left: 3px solid transparent;
   clear: right;
 }
 
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
 }