diff --git a/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
index 926fdcea25..0bb810cc57 100644
--- a/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
@@ -184,23 +184,21 @@ class HuiAlarmModeCardFeature
       `;
     }
     return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentMode}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize(
-            "ui.card.alarm_control_panel.modes_label"
-          )}
-          style=${styleMap({
-            "--control-select-color": color,
-            "--modes-count": options.length.toString(),
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
+      <ha-control-select
+        .options=${options}
+        .value=${this._currentMode}
+        @value-changed=${this._valueChanged}
+        hide-label
+        .ariaLabel=${this.hass.localize(
+          "ui.card.alarm_control_panel.modes_label"
+        )}
+        style=${styleMap({
+          "--control-select-color": color,
+          "--modes-count": options.length.toString(),
+        })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+      >
+      </ha-control-select>
     `;
   }
 
@@ -214,13 +212,8 @@ class HuiAlarmModeCardFeature
         --control-select-button-border-radius: 10px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
index 3cfa5624b5..1a5fcdc583 100644
--- a/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
@@ -140,54 +140,50 @@ class HuiClimateFanModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${this._currentFanMode}
-            @value-changed=${this._valueChanged}
-            hide-label
-            .ariaLabel=${this.hass!.formatEntityAttributeName(
-              stateObj,
-              "fan_mode"
-            )}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
+        <ha-control-select
+          .options=${options}
+          .value=${this._currentFanMode}
+          @value-changed=${this._valueChanged}
+          hide-label
+          .ariaLabel=${this.hass!.formatEntityAttributeName(
+            stateObj,
+            "fan_mode"
+          )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        >
+        </ha-control-select>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
-          .value=${this._currentFanMode}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${this._currentFanMode
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                attribute="fan_mode"
-                .attributeValue=${this._currentFanMode}
-              ></ha-attribute-icon>`
-            : html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`}
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option.value} graphic="icon">
-                ${option.icon}${option.label}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
+        .value=${this._currentFanMode}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${this._currentFanMode
+          ? html`<ha-attribute-icon
+              slot="icon"
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              attribute="fan_mode"
+              .attributeValue=${this._currentFanMode}
+            ></ha-attribute-icon>`
+          : html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`}
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option.value} graphic="icon">
+              ${option.icon}${option.label}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -208,10 +204,6 @@ class HuiClimateFanModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
index 16db6acb5c..8c71a1c618 100644
--- a/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
@@ -139,55 +139,51 @@ class HuiClimateHvacModesCardFeature
 
     if (this._config.style === "dropdown") {
       return html`
-        <div class="container">
-          <ha-control-select-menu
-            show-arrow
-            hide-label
-            .label=${this.hass.localize("ui.card.climate.mode")}
-            .value=${this._currentHvacMode}
-            .disabled=${this.stateObj.state === UNAVAILABLE}
-            fixedMenuPosition
-            naturalMenuWidth
-            @selected=${this._valueChanged}
-            @closed=${stopPropagation}
-          >
-            ${this._currentHvacMode
-              ? html`
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${climateHvacModeIcon(this._currentHvacMode)}
-                  ></ha-svg-icon>
-                `
-              : html`
-                  <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
-                `}
-            ${options.map(
-              (option) => html`
-                <ha-list-item .value=${option.value} graphic="icon">
-                  ${option.icon}${option.label}
-                </ha-list-item>
+        <ha-control-select-menu
+          show-arrow
+          hide-label
+          .label=${this.hass.localize("ui.card.climate.mode")}
+          .value=${this._currentHvacMode}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._valueChanged}
+          @closed=${stopPropagation}
+        >
+          ${this._currentHvacMode
+            ? html`
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${climateHvacModeIcon(this._currentHvacMode)}
+                ></ha-svg-icon>
               `
-            )}
-          </ha-control-select-menu>
-        </div>
+            : html`
+                <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
+              `}
+          ${options.map(
+            (option) => html`
+              <ha-list-item .value=${option.value} graphic="icon">
+                ${option.icon}${option.label}
+              </ha-list-item>
+            `
+          )}
+        </ha-control-select-menu>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentHvacMode}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize("ui.card.climate.mode")}
-          style=${styleMap({
-            "--control-select-color": color,
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
+      <ha-control-select
+        .options=${options}
+        .value=${this._currentHvacMode}
+        @value-changed=${this._valueChanged}
+        hide-label
+        .ariaLabel=${this.hass.localize("ui.card.climate.mode")}
+        style=${styleMap({
+          "--control-select-color": color,
+        })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+      >
+      </ha-control-select>
     `;
   }
 
@@ -207,9 +203,6 @@ class HuiClimateHvacModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
index b81915af3f..7a2fb0029d 100644
--- a/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
@@ -142,59 +142,52 @@ class HuiClimatePresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${this._currentPresetMode}
-            @value-changed=${this._valueChanged}
-            hide-label
-            .ariaLabel=${this.hass!.formatEntityAttributeName(
-              stateObj,
-              "preset_mode"
-            )}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
+        <ha-control-select
+          .options=${options}
+          .value=${this._currentPresetMode}
+          @value-changed=${this._valueChanged}
+          hide-label
+          .ariaLabel=${this.hass!.formatEntityAttributeName(
+            stateObj,
+            "preset_mode"
+          )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        >
+        </ha-control-select>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass!.formatEntityAttributeName(
-            stateObj,
-            "preset_mode"
-          )}
-          .value=${this._currentPresetMode}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${this._currentPresetMode
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                attribute="preset_mode"
-                .attributeValue=${this._currentPresetMode}
-              ></ha-attribute-icon>`
-            : html`
-                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
-              `}
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option.value} graphic="icon">
-                ${option.icon}${option.label}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
+        .value=${this._currentPresetMode}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${this._currentPresetMode
+          ? html`<ha-attribute-icon
+              slot="icon"
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              attribute="preset_mode"
+              .attributeValue=${this._currentPresetMode}
+            ></ha-attribute-icon>`
+          : html`
+              <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+            `}
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option.value} graphic="icon">
+              ${option.icon}${option.label}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -215,9 +208,6 @@ class HuiClimatePresetModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
index adc88c1948..8a3900a322 100644
--- a/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
@@ -142,57 +142,53 @@ class HuiClimateSwingModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${this._currentSwingMode}
-            @value-changed=${this._valueChanged}
-            hide-label
-            .ariaLabel=${this.hass!.formatEntityAttributeName(
-              stateObj,
-              "swing_mode"
-            )}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
+        <ha-control-select
+          .options=${options}
+          .value=${this._currentSwingMode}
+          @value-changed=${this._valueChanged}
+          hide-label
+          .ariaLabel=${this.hass!.formatEntityAttributeName(
+            stateObj,
+            "swing_mode"
+          )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        >
+        </ha-control-select>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
-          .value=${this._currentSwingMode}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${this._currentSwingMode
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                attribute="swing_mode"
-                .attributeValue=${this._currentSwingMode}
-              ></ha-attribute-icon>`
-            : html` <ha-svg-icon
-                slot="icon"
-                .path=${mdiArrowOscillating}
-              ></ha-svg-icon>`}
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option.value} graphic="icon">
-                ${option.icon}${option.label}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
+        .value=${this._currentSwingMode}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${this._currentSwingMode
+          ? html`<ha-attribute-icon
+              slot="icon"
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              attribute="swing_mode"
+              .attributeValue=${this._currentSwingMode}
+            ></ha-attribute-icon>`
+          : html` <ha-svg-icon
+              slot="icon"
+              .path=${mdiArrowOscillating}
+            ></ha-svg-icon>`}
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option.value} graphic="icon">
+              ${option.icon}${option.label}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -213,10 +209,6 @@ class HuiClimateSwingModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts b/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
index 1858112361..5b78e43e17 100644
--- a/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
@@ -130,7 +130,6 @@ class HuiCoverOpenCloseCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts b/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
index af7e8a5f23..a5f5454ef6 100644
--- a/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
@@ -78,26 +78,25 @@ class HuiCoverPositionCardFeature
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
-        <ha-control-slider
-          .value=${value}
-          min="0"
-          max="100"
-          step="1"
-          inverted
-          show-handle
-          @value-changed=${this._valueChanged}
-          .ariaLabel=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this.stateObj,
-            this.hass.entities,
-            "current_position"
-          )}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-          .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
-          .locale=${this.hass.locale}
-        ></ha-control-slider>
-      </div>
+      <ha-control-slider
+        style=${styleMap(style)}
+        .value=${value}
+        min="0"
+        max="100"
+        step="1"
+        inverted
+        show-handle
+        @value-changed=${this._valueChanged}
+        .ariaLabel=${computeAttributeNameDisplay(
+          this.hass.localize,
+          this.stateObj,
+          this.hass.entities,
+          "current_position"
+        )}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
+        .locale=${this.hass.locale}
+      ></ha-control-slider>
     `;
   }
 
@@ -120,10 +119,6 @@ class HuiCoverPositionCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts b/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
index d09c71aa62..4d088296d3 100644
--- a/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
@@ -122,7 +122,6 @@ class HuiCoverTiltCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts b/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
index 48e1a809c5..10c824bd5b 100644
--- a/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
@@ -78,27 +78,26 @@ class HuiCoverTiltPositionCardFeature
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
-        <ha-control-slider
-          .value=${value}
-          min="0"
-          max="100"
-          mode="cursor"
-          inverted
-          @value-changed=${this._valueChanged}
-          .ariaLabel=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this.stateObj,
-            this.hass.entities,
-            "current_tilt_position"
-          )}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-          .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_tilt_position}
-          .locale=${this.hass.locale}
-        >
-          <div slot="background" class="gradient"></div
-        ></ha-control-slider>
-      </div>
+      <ha-control-slider
+        style=${styleMap(style)}
+        .value=${value}
+        min="0"
+        max="100"
+        mode="cursor"
+        inverted
+        @value-changed=${this._valueChanged}
+        .ariaLabel=${computeAttributeNameDisplay(
+          this.hass.localize,
+          this.stateObj,
+          this.hass.entities,
+          "current_tilt_position"
+        )}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_tilt_position}
+        .locale=${this.hass.locale}
+      >
+        <div slot="background" class="gradient"></div
+      ></ha-control-slider>
     `;
   }
 
@@ -122,10 +121,6 @@ class HuiCoverTiltPositionCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
       .gradient {
         background: -webkit-linear-gradient(left, ${GRADIENT});
         opacity: 0.6;
diff --git a/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
index d1cfb0fcc2..2260c456b0 100644
--- a/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
@@ -139,59 +139,52 @@ class HuiFanPresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${this._currentPresetMode}
-            @value-changed=${this._valueChanged}
-            hide-label
-            .ariaLabel=${this.hass!.formatEntityAttributeName(
-              stateObj,
-              "preset_mode"
-            )}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
+        <ha-control-select
+          .options=${options}
+          .value=${this._currentPresetMode}
+          @value-changed=${this._valueChanged}
+          hide-label
+          .ariaLabel=${this.hass!.formatEntityAttributeName(
+            stateObj,
+            "preset_mode"
+          )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        >
+        </ha-control-select>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass!.formatEntityAttributeName(
-            stateObj,
-            "preset_mode"
-          )}
-          .value=${this._currentPresetMode}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${this._currentPresetMode
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                attribute="preset_mode"
-                .attributeValue=${this._currentPresetMode}
-              ></ha-attribute-icon>`
-            : html`
-                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
-              `}
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option.value} graphic="icon">
-                ${option.icon}${option.label}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
+        .value=${this._currentPresetMode}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${this._currentPresetMode
+          ? html`<ha-attribute-icon
+              slot="icon"
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              attribute="preset_mode"
+              .attributeValue=${this._currentPresetMode}
+            ></ha-attribute-icon>`
+          : html`
+              <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+            `}
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option.value} graphic="icon">
+              ${option.icon}${option.label}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -212,10 +205,6 @@ class HuiFanPresetModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts b/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
index 932c3a93d2..e8377991ca 100644
--- a/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
@@ -88,35 +88,11 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
       const speed = fanPercentageToSpeed(this.stateObj, percentage);
 
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${speed}
-            @value-changed=${this._speedValueChanged}
-            hide-label
-            .ariaLabel=${computeAttributeNameDisplay(
-              this.hass.localize,
-              this.stateObj,
-              this.hass.entities,
-              "percentage"
-            )}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
-      `;
-    }
-
-    const value = Math.max(Math.round(percentage), 0);
-
-    return html`
-      <div class="container">
-        <ha-control-slider
-          .value=${value}
-          min="0"
-          max="100"
-          .step=${this.stateObj.attributes.percentage_step ?? 1}
-          @value-changed=${this._valueChanged}
+        <ha-control-select
+          .options=${options}
+          .value=${speed}
+          @value-changed=${this._speedValueChanged}
+          hide-label
           .ariaLabel=${computeAttributeNameDisplay(
             this.hass.localize,
             this.stateObj,
@@ -124,10 +100,30 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
             "percentage"
           )}
           .disabled=${this.stateObj!.state === UNAVAILABLE}
-          .unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
-          .locale=${this.hass.locale}
-        ></ha-control-slider>
-      </div>
+        >
+        </ha-control-select>
+      `;
+    }
+
+    const value = Math.max(Math.round(percentage), 0);
+
+    return html`
+      <ha-control-slider
+        .value=${value}
+        min="0"
+        max="100"
+        .step=${this.stateObj.attributes.percentage_step ?? 1}
+        @value-changed=${this._valueChanged}
+        .ariaLabel=${computeAttributeNameDisplay(
+          this.hass.localize,
+          this.stateObj,
+          this.hass.entities,
+          "percentage"
+        )}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        .unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
+        .locale=${this.hass.locale}
+      ></ha-control-slider>
     `;
   }
 
@@ -170,10 +166,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
index ee5176f9ad..fe8322264f 100644
--- a/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
@@ -143,54 +143,50 @@ class HuiHumidifierModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
-          <ha-control-select
-            .options=${options}
-            .value=${this._currentMode}
-            @value-changed=${this._valueChanged}
-            hide-label
-            .ariaLabel=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
-            .disabled=${this.stateObj!.state === UNAVAILABLE}
-          >
-          </ha-control-select>
-        </div>
+        <ha-control-select
+          .options=${options}
+          .value=${this._currentMode}
+          @value-changed=${this._valueChanged}
+          hide-label
+          .ariaLabel=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        >
+        </ha-control-select>
       `;
     }
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
-          .value=${this._currentMode}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${this._currentMode
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                attribute="mode"
-                .attributeValue=${this._currentMode}
-              ></ha-attribute-icon>`
-            : html`<ha-svg-icon
-                slot="icon"
-                .path=${mdiTuneVariant}
-              ></ha-svg-icon>`}
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option.value} graphic="icon">
-                ${option.icon}${option.label}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
+        .value=${this._currentMode}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${this._currentMode
+          ? html`<ha-attribute-icon
+              slot="icon"
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              attribute="mode"
+              .attributeValue=${this._currentMode}
+            ></ha-attribute-icon>`
+          : html`<ha-svg-icon
+              slot="icon"
+              .path=${mdiTuneVariant}
+            ></ha-svg-icon>`}
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option.value} graphic="icon">
+              ${option.icon}${option.label}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -211,10 +207,6 @@ class HuiHumidifierModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts b/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
index 647da49f1a..79a87494d4 100644
--- a/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
@@ -95,20 +95,18 @@ class HuiHumidifierToggleCardFeature
     }));
 
     return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentState}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize("ui.card.humidifier.state")}
-          style=${styleMap({
-            "--control-select-color": color,
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
+      <ha-control-select
+        .options=${options}
+        .value=${this._currentState}
+        @value-changed=${this._valueChanged}
+        hide-label
+        .ariaLabel=${this.hass.localize("ui.card.humidifier.state")}
+        style=${styleMap({
+          "--control-select-color": color,
+        })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+      >
+      </ha-control-select>
     `;
   }
 
@@ -121,10 +119,6 @@ class HuiHumidifierToggleCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts b/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
index 52ec9c59d2..8c3b2b6927 100644
--- a/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
@@ -173,7 +173,6 @@ class HuiLawnMowerCommandCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts b/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
index 01217a3e4a..9480aad55e 100644
--- a/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
@@ -58,19 +58,17 @@ class HuiLightBrightnessCardFeature
         : undefined;
 
     return html`
-      <div class="container">
-        <ha-control-slider
-          .value=${position}
-          min="1"
-          max="100"
-          .showHandle=${stateActive(this.stateObj)}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-          @value-changed=${this._valueChanged}
-          .label=${this.hass.localize("ui.card.light.brightness")}
-          unit="%"
-          .locale=${this.hass.locale}
-        ></ha-control-slider>
-      </div>
+      <ha-control-slider
+        .value=${position}
+        min="1"
+        max="100"
+        .showHandle=${stateActive(this.stateObj)}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        @value-changed=${this._valueChanged}
+        .label=${this.hass.localize("ui.card.light.brightness")}
+        unit="%"
+        .locale=${this.hass.locale}
+      ></ha-control-slider>
     `;
   }
 
@@ -93,9 +91,6 @@ class HuiLightBrightnessCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts b/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
index 400e728eda..77ae32e058 100644
--- a/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
@@ -73,23 +73,21 @@ class HuiLightColorTempCardFeature
     const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
 
     return html`
-      <div class="container">
-        <ha-control-slider
-          .value=${position}
-          mode="cursor"
-          .showHandle=${stateActive(this.stateObj)}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-          @value-changed=${this._valueChanged}
-          .label=${this.hass.localize("ui.card.light.color_temperature")}
-          .min=${minKelvin}
-          .max=${maxKelvin}
-          style=${styleMap({
-            "--gradient": gradient,
-          })}
-          .unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
-          .locale=${this.hass.locale}
-        ></ha-control-slider>
-      </div>
+      <ha-control-slider
+        .value=${position}
+        mode="cursor"
+        .showHandle=${stateActive(this.stateObj)}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        @value-changed=${this._valueChanged}
+        .label=${this.hass.localize("ui.card.light.color_temperature")}
+        .min=${minKelvin}
+        .max=${maxKelvin}
+        style=${styleMap({
+          "--gradient": gradient,
+        })}
+        .unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
+        .locale=${this.hass.locale}
+      ></ha-control-slider>
     `;
   }
 
@@ -119,9 +117,6 @@ class HuiLightColorTempCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts b/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
index 19d737bb21..ca4279d430 100644
--- a/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
@@ -90,7 +90,6 @@ class HuiLockCommandsCardFeature
   static get styles(): CSSResultGroup {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
index 298daabb55..7e9f14874d 100644
--- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
@@ -117,7 +117,6 @@ class HuiLockOpenDoorCardFeature
         font-size: 14px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
       .open-button {
@@ -136,7 +135,6 @@ class HuiLockOpenDoorCardFeature
         gap: 8px;
         font-weight: 500;
         color: var(--success-color);
-        margin: 0 12px 12px 12px;
         height: 40px;
         text-align: center;
       }
diff --git a/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts b/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
index e725a446ab..8ebca9a31b 100644
--- a/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
@@ -82,29 +82,27 @@ class HuiNumericInputCardFeature
     const stateObj = this.stateObj;
 
     return html`
-      <div class="container">
-        ${this._config.style === "buttons"
-          ? html`<ha-control-number-buttons
-              value=${stateObj.state}
-              min=${stateObj.attributes.min}
-              max=${stateObj.attributes.max}
-              step=${stateObj.attributes.step}
-              @value-changed=${this._setValue}
-              .disabled=${isUnavailableState(stateObj.state)}
-              .unit=${stateObj.attributes.unit_of_measurement}
-              .locale=${this.hass.locale}
-            ></ha-control-number-buttons>`
-          : html`<ha-control-slider
-              value=${stateObj.state}
-              min=${stateObj.attributes.min}
-              max=${stateObj.attributes.max}
-              step=${stateObj.attributes.step}
-              @value-changed=${this._setValue}
-              .disabled=${isUnavailableState(stateObj.state)}
-              .unit=${stateObj.attributes.unit_of_measurement}
-              .locale=${this.hass.locale}
-            ></ha-control-slider>`}
-      </div>
+      ${this._config.style === "buttons"
+        ? html`<ha-control-number-buttons
+            value=${stateObj.state}
+            min=${stateObj.attributes.min}
+            max=${stateObj.attributes.max}
+            step=${stateObj.attributes.step}
+            @value-changed=${this._setValue}
+            .disabled=${isUnavailableState(stateObj.state)}
+            .unit=${stateObj.attributes.unit_of_measurement}
+            .locale=${this.hass.locale}
+          ></ha-control-number-buttons>`
+        : html`<ha-control-slider
+            value=${stateObj.state}
+            min=${stateObj.attributes.min}
+            max=${stateObj.attributes.max}
+            step=${stateObj.attributes.step}
+            @value-changed=${this._setValue}
+            .disabled=${isUnavailableState(stateObj.state)}
+            .unit=${stateObj.attributes.unit_of_measurement}
+            .locale=${this.hass.locale}
+          ></ha-control-slider>`}
     `;
   }
 
@@ -120,10 +118,6 @@ class HuiNumericInputCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-select-options-card-feature.ts b/src/panels/lovelace/card-features/hui-select-options-card-feature.ts
index 60b99116e4..97bb08ba98 100644
--- a/src/panels/lovelace/card-features/hui-select-options-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-select-options-card-feature.ts
@@ -119,27 +119,25 @@ class HuiSelectOptionsCardFeature
     );
 
     return html`
-      <div class="container">
-        <ha-control-select-menu
-          show-arrow
-          hide-label
-          .label=${this.hass.localize("ui.card.select.option")}
-          .value=${stateObj.state}
-          .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._valueChanged}
-          @closed=${stopPropagation}
-        >
-          ${options.map(
-            (option) => html`
-              <ha-list-item .value=${option}>
-                ${this.hass!.formatEntityState(stateObj, option)}
-              </ha-list-item>
-            `
-          )}
-        </ha-control-select-menu>
-      </div>
+      <ha-control-select-menu
+        show-arrow
+        hide-label
+        .label=${this.hass.localize("ui.card.select.option")}
+        .value=${stateObj.state}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+        fixedMenuPosition
+        naturalMenuWidth
+        @selected=${this._valueChanged}
+        @closed=${stopPropagation}
+      >
+        ${options.map(
+          (option) => html`
+            <ha-list-item .value=${option}>
+              ${this.hass!.formatEntityState(stateObj, option)}
+            </ha-list-item>
+          `
+        )}
+      </ha-control-select-menu>
     `;
   }
 
@@ -153,10 +151,6 @@ class HuiSelectOptionsCardFeature
         display: block;
         width: 100%;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts b/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
index 2f637d050b..0b73a501b5 100644
--- a/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
@@ -84,22 +84,17 @@ class HuiTargetHumidityCardFeature
     }
 
     return html`
-      <div class="container">
-        <ha-control-slider
-          .value=${this.stateObj.attributes.humidity}
-          .min=${this._min}
-          .max=${this._max}
-          .step=${this._step}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-          @value-changed=${this._valueChanged}
-          .label=${this.hass.formatEntityAttributeName(
-            this.stateObj,
-            "humidity"
-          )}
-          unit="%"
-          .locale=${this.hass.locale}
-        ></ha-control-slider>
-      </div>
+      <ha-control-slider
+        .value=${this.stateObj.attributes.humidity}
+        .min=${this._min}
+        .max=${this._max}
+        .step=${this._step}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+        @value-changed=${this._valueChanged}
+        .label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
+        unit="%"
+        .locale=${this.hass.locale}
+      ></ha-control-slider>
     `;
   }
 
@@ -112,10 +107,6 @@ class HuiTargetHumidityCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }
diff --git a/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts b/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
index a2f9ddb8ad..ff1fcb48f7 100644
--- a/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
@@ -151,7 +151,6 @@ class HuiUpdateActionsCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts b/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
index 02ceff183c..c66702ee60 100644
--- a/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
@@ -212,7 +212,6 @@ class HuiVacuumCommandCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;
diff --git a/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
index f676b16ca6..73795e7bf9 100644
--- a/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
@@ -118,20 +118,18 @@ class HuiWaterHeaterOperationModeCardFeature
     }));
 
     return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentOperationMode}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize("ui.card.water_heater.mode")}
-          style=${styleMap({
-            "--control-select-color": color,
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
+      <ha-control-select
+        .options=${options}
+        .value=${this._currentOperationMode}
+        @value-changed=${this._valueChanged}
+        hide-label
+        .ariaLabel=${this.hass.localize("ui.card.water_heater.mode")}
+        style=${styleMap({
+          "--control-select-color": color,
+        })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
+      >
+      </ha-control-select>
     `;
   }
 
@@ -145,13 +143,8 @@ class HuiWaterHeaterOperationModeCardFeature
         --control-select-button-border-radius: 10px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }