diff --git a/src/block-components/helpers/size/edit.js b/src/block-components/helpers/size/edit.js
index a047e1dbd..22df6f050 100644
--- a/src/block-components/helpers/size/edit.js
+++ b/src/block-components/helpers/size/edit.js
@@ -7,9 +7,7 @@ import {
 	AdvancedRangeControl,
 	FourRangeControl,
 } from '~stackable/components'
-import {
-	useAttributeEditHandlers, useDeviceType,
-} from '~stackable/hooks'
+import { useAttributeEditHandlers, useDeviceType } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
index ff4ec0ba8..4a5ec9d45 100644
--- a/src/block-components/helpers/size/style.js
+++ b/src/block-components/helpers/size/style.js
@@ -63,6 +63,24 @@ const Styles = props => {
 				responsive="all"
 				hasUnits="px"
 			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ wrapperSelector || selector }
+				styleRule="width"
+				attrName="horizontalAlign"
+				key="component-width"
+				attrNameTemplate={ attrNameTemplate }
+				valueCallback={ ( _, getAttribute ) => {
+					const widthUnit = getAttribute( 'widthUnit' )
+					const horizontalAlign = getAttribute( 'horizontalAlign' )
+					return ( widthUnit === 'px' ) && horizontalAlign ? '100%' : undefined
+				} }
+				dependencies={ [
+					'horizontalAlign',
+					 'width',
+					 ...dependencies,
+				] }
+			/>
 			<BlockCss
 				{ ...propsToPass }
 				selector={ wrapperSelector || selector }