I was doing a challenge on frontendmentor.io and I'm currently stuck on one thing: the styling on a line-break isn't being applied.

I've made a pen on codepen for ease : codepen link

Html code:

    <main>
        <div >
            <img  src="./images/image-equilibrium.jpg" alt="blueish-red equilibrium cube">
            <div >
                <h2 >Equilibrium #3429</h2>
                <p>Our Equilibrium collection promotes balance and calm.</p>
                <div >
                    <div ><img  alt="ethereum value to purchase item" src="./images/icon-ethereum.svg"><h3 >0.041eth</h3></div>
                    <div ><img  alt="days-remaining icon" src="./images/icon-clock.svg"><h3 > 3 days left</h3></div>
                </div>
                <hr >
                <div >
                    <img  src="./images/image-avatar.png" alt="Creator profile picture">
                    <p>Creation of <strong>Jules Wyvern</strong></p>
                </div>
            </div>
        </div>
    </main>

css :

/*   typography and styling   */
h2 {
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 1.75rem;
}

p {
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.5;
}

.eth .icon-text {
    color: var(--text-color-eth);
    font-family: var(--body-font);
    text-transform: uppercase;
    font-weight: 600;
}

.days-left .icon-text {
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: 300;
}

hr.line-break {
    border-top: 1px solid #aaaaea);
}

CodePudding user response：

You can add the styles for line break. I Noticed that you have added ")" at the end. you have to remove it.

check this image

CodePudding user response：

This is your code:

hr.line-break {
    border-top: 1px solid #aaaaea;
}

Delete the )

CodePudding user response：

I don't think hr take in any style.

You can use an empty <div class='line-break'></div> instead

Like this

.line-break{
 width:100vw;
 hight:1px;
 border-top: 1px solid #aaaaea;
}