CSS 帮助

我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。

css

.hero {
    position: relative;
    bottom: 80px;
    display: flex;
    justify-content: left;
    align-items: start;
    color: rgb(255, 255, 255);
    background-color: rgb(80, 40, 40);
    width: 1600px;
    height: 1955px;
    margin: auto;
    border-radius: 60px;
}

.firstheroleft-column {
    font-family: system-ui, -apple-system, blinkmacsystemfont, 'segoe ui', roboto, oxygen, ubuntu, cantarell, 'open sans', 'helvetica neue', sans-serif;
    align-items: start;
    margin-top: 180px;
    margin-left: 40px;
    justify-content: left;
}

.middleheroleft-column {
    font-family: system-ui, -apple-system, blinkmacsystemfont, 'segoe ui', roboto, oxygen, ubuntu, cantarell, 'open sans', 'helvetica neue', sans-serif;
    align-items: start;
    margin-top: 580px;
    margin-left: 40px;
    justify-content: left;
}

.bottleimg {
    width: 80%;
    float: right;
}

.europeimg {
    width: 80%;
}

.trademarkimg {
    width: 80%;
}

html

<section class="hero">
        <div class="firstHeroLeft-column">
            <p>From the moment the water is collected, it undergoes a series of advanced filtration processes to remove any impurities while retaining the essential minerals that contribute to its refreshing taste. The water is then bottled in a state-of-the-art facility, where it is sealed to preserve its natural freshness and purity. We pride ourselves on delivering water that tastes as if it came straight from the source, ensuring every sip is as crisp and revitalizing as the first.</p>
        </div>
        <div class="firstHeroRight-column">
            @@##@@
        </div>
        <div class="middleHeroLeft-column">
            <p>We operate in multiple markets, including local, regional, and international distribution channels, ensuring that our water reaches customers in diverse locations. Whether through supermarkets, convenience stores, or direct-to-consumer sales, our products are readily available to meet the needs of both individuals and businesses.</p>
        </div>
        <div class="middleHeroRight-column">
            @@##@@
        </div>
        <div class="lastHeroLeft-column">
            <p>Our company is fully registered and operates in compliance with all relevant health and safety regulations. We hold various certifications, including ISO standards, which attest to our dedication to product quality and environmental responsibility. Our bottles are made from eco-friendly materials, and we are continually working to reduce our carbon footprint.</p>
        </div>
        <div class="lastHeroRight-column">
            @@##@@
        </div>
    </section>

以上就是CSS 帮助的详细内容，更多请关注其它相关文章！