Recently, I encountered an issue with a div element positioned at the beginning of a block. To center it on the page, I utilized flexbox and successfully achieved the desired result.
My CSS code to center the div:
.elementor-element-acf3e44{
display: flex;
justify-content:center;
}
Subsequently, I attempted to make the div span the full width using the following code. However, while in the customization section, the block appeared to take up the full width. Upon previewing the page, the block retained its original size and did not center itself as intended. Here is the code I used:
.elementor-element-acf3e44 > div:nth-child(1) {
width: 100% !important;
}
I am eager to understand the underlying issue and resolve the conflicting behavior of the div element.