Can't get rid of a purple dashed area of the div

Question

After learning a bit of CSS and flexbox, I am trying to build a Landing brochure site. On the journey of building one, I have faced one issue that I couldn't troubleshoot on my own. I am trying to remove the Purple dashed area by having the Col element or Row element span out. Despite the efforts to do so, the purple dashed area doesn't go away. Is there some CSS I should add? I want it to look somewhat center-aligned by making it filled. I couldn't make the code run on the snippet due to multiple dependencies but I hope the Screenshot helps.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import { IoIosFlash } from "react-icons/io";
import styled from "styled-components";
import studyImg from "../../../asset/casual-life-3d-reading.png";

const heroColor = ({ theme }) => theme.colors.blueberry;
const navyColor = ({ theme }) => theme.colors.navy;
const whiteColor = ({ theme }) => theme.colors.white;

const data = {
    heroMessage: "Memorize and Learn like thunder",
    CTAMessage:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
    CTAButtonText: "Get Started",
};

const HeroSection = styled.div`
    padding: 160px 0;
    background: ${heroColor};
    height: 60vh;
`;

const HeroContainer = styled.div`
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 50px;
    padding-left: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
    flex-wrap: wrap;
`;

const Row = styled.div`
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
`;

const Col = styled.div`
    margin-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    flex: 1;
    max-width: 50%;
    flex-basis: 50%;
`;

const HeroTextWrapper = styled.div`
    max-width: 540px;
    padding-top: 0;
    padding-bottom: 60px;
`;

const HeroImageWrapper = styled.div`
    max-width: 555px;
`;

const HeroMessage = styled.h1`
    color: ${whiteColor};
    font-size: 60px;
    margin-bottom: 30px;
`;

const HeroImage = styled.img`
    margin-top: 0;
    margin-right: 0;
    margin-left: 10px;
    padding-right: 0;
    border: 0;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
`;

const CTAMessage = styled.h4`
    color: ${whiteColor};
    margin-bottom: 50px;
`;

const CTAWrapper = styled.div``;

const CTAButton = styled.button`
    background: transparent;
    color: ${whiteColor};
    font-size: 14px;
    border-color: ${whiteColor};
    border-style: solid;
    border-width: 2px;
    border-radius: 22px;
    padding: 10px 40px;
    text-transform: uppercase;
    transition: all 0.2s linear;

    &:hover {
        background: ${navyColor};
        cursor: pointer;
        border-color: ${navyColor};
        transition: all 0.2s linear;
    }
`;

const Wave = styled.svg`
    stroke-opacity: 0;
`;

const WavePath = styled.path`
    fill: ${heroColor};
`;

function Hero() {
    return (
        <>
            <HeroSection>
                <HeroContainer>
                    <Row>
                        <Col>
                            <HeroTextWrapper>
                                <HeroMessage>
                                    {data.heroMessage}
                                    <IoIosFlash color="yellow" />
                                </HeroMessage>
                                <CTAWrapper>
                                    <CTAMessage>{data.CTAMessage}</CTAMessage>
                                    <CTAButton>{data.CTAButtonText}</CTAButton>
                                </CTAWrapper>
                            </HeroTextWrapper>
                        </Col>
                        <Col>
                            <HeroImageWrapper>
                                <HeroImage src={studyImg} alt="Study Image" />
                            </HeroImageWrapper>
                        </Col>
                    </Row>
                </HeroContainer>
            </HeroSection>
            <Wave viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
                <WavePath d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"></WavePath>
            </Wave>
        </>
    );
}

export default Hero;

Screenshot

Medicaid

Answer 1

So there are a couple of solutions here:

• You have to make this container with width: 100%, with that the container will take all the space of the parent container and there wont be any of the purple thing.
• Other solution is to justify-content: center of the parent node so like that the child node will be in the center but the purple thing is going to be even from the both sides, in other words will be splited in two even halfs, one in the beggining and one in the end.

NOTE: Try not to use fixed width/height

Impotent

Answer 2

For me, checking all the parents' max-width/max-heights helped me see that one of them was set to smaller than a child.

Mitchum

Answer 3

I encountered the same issue, and I resolved it by applying these two facts:

• Rows are wrappers for columns.
• And also! Rows cannot be wrappers for rows!

So, if there is a purple dotted area in your row that you cannot understand from where it comes, check if there are two or more nested rows! Wrap the inner row with another div like <div class="col-12"></div>, and I think that should fix the problem.

Selfimportant