在学习了一些 CSS 和 flexbox 之后，我正在尝试构建一个 Landing 宣传册网站。在构建一个的过程中，我遇到了一个我无法独自解决的问题。我试图通过使Col元素或Row元素跨越来删除紫色虚线区域。尽管付出了努力，紫色虚线区域并没有消失。我应该添加一些 CSS 吗？我希望通过填充它来使其看起来有点居中对齐。由于多个依赖项，我无法使代码在代码片段上运行，但我希望屏幕截图有所帮助。
<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 …