After gaining some knowledge of CSS and flexbox, I decided to create a Landing brochure site. However, I encountered an issue that I couldn't solve on my own during the building process.
I'm attempting to eliminate the Purple dashed area by extending the Col element or Row element. Despite my efforts, the purple dashed area persists. Do I need to add some specific CSS to achieve this? I want it to appear somewhat center-aligned by filling the space. Unfortunately, I couldn't run the code on the snippet due to multiple dependencies, but I hope the Screenshot provided can offer some insight.
<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";
// Additional styled components and JSX code provided here
export default Hero;