Please help me to identify the issue why CSS is not working for portfolio section. where is the mistake?

.port-text{
    padding: 2rem 0;
    text-align: center;
}

.portfolios{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    .portfolio-item{
        position: relative;
        border-radius: 15px;
        img{
            width: 100%;
            height: 300px;
            object-fit: contain;
            border-radius: 15px;
        }
        .hover-items{
            width: 100%;
            height: 100%;
            background-color: var(--color-secondary);
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            h3{
                font-size: 1.5rem;
                color: var(--color-white);
                margin-bottom: 1.5rem;
            }
            .icons{
                display: flex;
                justify-content: center;
                align-items: center;
                .icon{
                    background-color: var(--color-primary);
                    border-radius: 50%;
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }
}

        <section  id="portfolio">
            <div >
                <h2>My <span>Portfolio</span><span >My Work</span></h2>
            </div>

------------In this paragraph css is not applying.-----------------------
            <p >
                Here is some of my work that i have done in various programming Langugages using different technologies.
            </p>
            <div >
                <div >
                    <div >
                        <img src="img/port1.jpg" alt="">
                    </div>
                    <div >
                        <h3>Project source</h3>
                        <div >
                            <a href="#"  target="_blank">
                                <i ></i>
                            </a>
                            <a href="#"  target="_blank">
                                <i ></i>
                            </a>
                            <a href="#"  target="_blank">
                                <i ></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

CodePudding user response：

I think you misspelled classname portfolio in css file.

You wrote portfolios instead of portfolio in css file.

.portfolio{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    .portfolio-item{
        position: relative;
        border-radius: 15px;
        img{
            width: 100%;
            height: 300px;
            object-fit: contain;
            border-radius: 15px;
        }
        .hover-items{
            width: 100%;
            height: 100%;
            background-color: var(--color-secondary);
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            h3{
                font-size: 1.5rem;
                color: var(--color-white);
                margin-bottom: 1.5rem;
            }
            .icons{
                display: flex;
                justify-content: center;
                align-items: center;
                .icon{
                    background-color: var(--color-primary);
                    border-radius: 50%;
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }
}
       

 <section  id="portfolio">
            <div >
                <h2>My <span>Portfolio</span><span >My Work</span></h2>
            </div>

CodePudding user response：

Bro why you using nested CSS. Write it simple. Do not put one class in another, put every class differently.