To make duplicated div blocks in Webflow independent of each other, you need to detach them from their parent element.
Here's how you can do it:
1. Select the duplicated div block you want to make independent.
2. In the style panel on the right-hand side, navigate to the "Position" section.
3. Click on the "Position" dropdown and select "Relative" or "Absolute" positioning. This will detach the div block from its parent element, making it independent.
4. Now, any changes you make to this duplicated div block will not affect the other duplicated div blocks.
Regarding the extra side space on your Webflow site, there are a few possible causes and solutions:
1. Check for unwanted margins or paddings:
- Select the element that has extra side space.
- In the style panel, navigate to the "Margins" or "Padding" section.
- Make sure there are no unintentional values assigned to any of the sides (top, bottom, left, right). Set them to 0 if necessary.
2. Ensure there are no fixed or maximum widths causing the extra space:
- Select the element or parent container.
- In the style panel, navigate to the "Width" section.
- Check if there's any fixed width set or a maximum width that's wider than necessary. Adjust it accordingly.
3. Review any settings related to the layout or container:
- Check if the element or parent container has any specific layout or container settings that may be causing the extra side space.
- For example, if you're using a flexbox or grid layout, make sure the settings for alignment, spacing, or wrapping are correct.
4. Consider the effect of nested elements:
- Sometimes, extra side space can be caused by nested elements within the element you're inspecting.
- Examine the children elements within the container and make sure their widths, margins, or paddings aren't affecting the overall layout.
If none of these solutions resolve the extra side space issue, providing more specific details or the URL of your Webflow site could help in identifying the problem and providing a more targeted solution.