The Correct Structure is not showing on Html Display Flex

I'm a student, and currently, I'm working on an Html project that I need to present, I've uploaded the section I'm having a problem on Codepen, so you don't need to create a document and save the code from Stackoverflow.

I was trying to have a structure like this: Screenshot, with Flexbox, but I can't get it right, I'm missing something small maybe, can you guys try to help me to fix this one, so the others learn too.

Here HTML is the code:

<div class="sektori-2">
        <div class="sektori-2v1">
            <p class="wink-sm-title-section-2">ÇKA OFROJM NE?</p>
            <h1 class="wink-title-section-2">Wink, një vend ku mund të gjendet gjithçka inovative.</h1>
            <p class="wink-txt-section-2">Ne jemi të apasionuar pas punës sonë dhe na pëlqen të fuqizojmë aftësitë
                dixhitale të bizneseve. Nëse edhe ju, ndiheni në tën njëjtën mënyrë dhe mendoni se
                karriera juaj mund të vazhdojë duke bashkpunuar me ne, atëherë shikojeni shërbimet tona.</p>
        </div>
        <div>
            <div class="d2">
                <img src="images/edit.svg" alt="Icon" width="42px">
                <p class="wink-item-title-section-2">Ilustrime</p>
                <p class="wink-item-txt-section-2">Wink Illustron gjëra abstrakte në mënyrë profesionale dhe precize
                    me
                    standardet të fundit.</p>
            </div>
            <div class="d3">
                <img src="images/play.svg" alt="Icon" width="42px">
                <p class="wink-item-title-section-2">Ilustrime</p>
                <p class="wink-item-txt-section-2">Wink mund t'ju nidhmojë në trailerin tuaj animativ duke përdorur
                    dizajn fenomenal.</p>
            </div>
        </div>
        <div>
            <div class="d4">
                <img src="images/gallery.svg" alt="Icon" width="42px">
                <p class="wink-item-title-section-2">Ilustrime</p>
                <p class="wink-item-txt-section-2">Wink harton me kreativitet markat e bizneseve të ndryshme duke
                    përdorur veglat e fundit.</p>
            </div>
            <div class="d5">
                <img src="images/paper.svg" alt="Icon" width="42px">
                <p class="wink-item-title-section-2">Ilustrime</p>
                <p class="wink-item-txt-section-2">Wink harton dhe zhvillon faqet inovative të internetit me
                    përqëndrim
                    te përdorshmëria.</p>
            </div>
        </div>
    </div>

Here is the CSS code:

*{
 margin:0;
  padding:0;
}

.sektori-2 {
    padding-top: 4%;
    background-color: #17181A;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sektori-2v1 {
    margin-left: 10%;
    margin-right: 10%;
}

.d2 {
    margin-left: 10%;
    width: 30%;
    padding-bottom: 5%;
}

.d3 {
    margin-left: 10%;
    width: 30%;
    padding-bottom: 5%;
}

.d4 {
    margin-left: 10%;
    width: 30%;
    padding-bottom: 5%;
}

.d5 {
    margin-left: 10%;
    width: 30%;
    padding-bottom: 5%;
}

.wink-sm-title-section-2 {
    font-size: 1rem;
    padding-bottom: 1.3rem;
    color: white;
}

.wink-title-section-2 {
    font-size: 2rem;
    font-style: normal;
    padding-bottom: 1.5rem;
    color: white;
}

.wink-txt-section-2 {
    font-size: 1.2rem;
    padding-bottom: 2.5rem;
    color: white;
}

.wink-holder-section-2 {
    text-decoration: none;
}

.wink-item-title-section-2 {
    color: white;
    font-size: 1rem;
}

.wink-item-txt-section-2 {
    color: white;
    font-size: 1rem;
}


Read more here: https://stackoverflow.com/questions/65708625/the-correct-structure-is-not-showing-on-html-display-flex

Content Attribution

This content was originally published by akaI-Know at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: