Some prob with my vs

HTML-CSS
1

Hey, in codepen, my section code works perfectly, but in my vs code, it’s not working, the right side is not scrolling, and I can’t see the images, nor the p elements, nothing other than Jinu heading.

here is my codepen,

CodePen

and this is my whole vs CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: caveat;
    line-height: 1.6;
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}
html, body {
   height: 100%;
  margin: 0;
  padding: 0;
}

header {
    max-width: 100%;
    margin: 0;
}

nav {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: transparent;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(202, 13, 240, 0.324);
    overflow-x: auto;
    margin: 0%;
    position: fixed;
    top: 0;
    z-index: 10; 
}
ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul li {
    display: inline;
    margin: 0 60px;

}
li a {
    text-decoration: none;
    color: whitesmoke;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
}
li a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: whitesmoke;
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: center;
}
li a:hover::before {
    transform: scaleX(1);
}

li a:hover {
    color: rgb(202, 13, 240);
}
.logo {
    width: 130px;
    height: auto;
    margin: 0 20px;
}
.logo img {
    width: 130%;
    height: auto;
}
main {
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(202, 13, 240, 1) 20%,
        rgb(32, 1, 32) 60%
    );
    padding-top: 100px;
    position: relative;
    z-index: 1;
}
.cha {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    margin-top: -90px;
    z-index: 3;
}
.cha img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
main h1 {
    font-family: 'Kablammo', cursive;
    font-size: 8vw;
    background: linear-gradient(180deg, rgb(237, 237, 237) 0%, rgba(202, 13, 240, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-top: 20px;
    z-index: 4;
}
#rumi {
    align-items: center;
    margin-left: 10px;
}
#jinu {
    align-items: center;
    margin-left: -110px;
}
.smoke {
    height: 100%;
    background: transparent;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;   
    width: 100%;
    mix-blend-mode: screen; 
    z-index: 2; 
    pointer-events: none;
}

.smoke:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgb(32, 1, 32), rgba(202, 13, 240, 1));
    mix-blend-mode: color;
    pointer-events: none;
}
.smoke video{
    object-fit: cover;
    height: 100%;
    width: 100%;
    background: transparent;
}
.mission {
  position: relative;
  overflow: hidden;
  background: rgb(32, 1, 32) 60%;
  min-height: 100vh;
  z-index: 1;
  width: 100%;
}

.floating-souls {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.soul {
  position: absolute;
  bottom: -60px;
  width: 40px;
  height: 110px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 90%;
  border-bottom-left-radius: 90%;
  background: radial-gradient(circle, #ffffffcc, #00bfff22);
  box-shadow: 0 0 20px #00bfff88, 0 0 40px #ffffff33;
  opacity: 0.6;
}

@keyframes floatA {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0.2; top: 40%; left: 0;}
  50%  {top: 30%; left: 30px;}
  100% { transform: translate(20px, -400px) rotate(10deg); opacity: 0; top: 10%; left: 10px;}
}

@keyframes floatB {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.2; top: 60%; left: 0px;}
  50%  {top: 50%; left: 840px;}
  100% { transform: translate(-30px, -400px) scale(1.2); opacity: 0; top: 0%; left: 300px;}
}

@keyframes floatC {
  0%   { transform: translate(0, 0); opacity: 0.3; top: 100%; left: 80%;}
  25%  { transform: translate(20px, -100px); top: 80%; left: 70%; }
  50%  { transform: translate(-20px, -200px); top: 50%; left: 55%;}
  75%  { transform: translate(20px, -300px); top: 30%; left: 40%;}
  100% { transform: translate(-20px, -400px); opacity: 0; top: 0%; left: 30%;}
}

@keyframes floatD {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0.2; }
  100% { transform: translate(40px, -40%) rotate(-20deg); opacity: 0; }
}

.floatA { animation: floatA 4s ease-in-out infinite; }
.floatB { animation: floatB 8s ease-in-out infinite; }
.floatC { animation: floatC 10s ease-in-out infinite; }
.floatD { animation: floatD 10s ease-in-out infinite; }

.mis-b {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}
.mis-r {
    width: 50%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mis-r h1 {
    font-size: 9em;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: "Mozilla Headline", sans-serif;
    text-align: justify;
    margin-right: 90px;
    margin-top: 50px;
}
.mis-l {
    width: 50%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mis-l p {
    font-size: 1.5rem;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: "Mozilla Headline", sans-serif;
    text-align: justify;
}
.hunters {
  width: 100%;
  min-height: 100vh;
  background: rgb(32, 1, 32) 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px;
}
.huntersCon {
  width: 50%;
  height: 100vh;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}
.huntersCon h1 {
  font-size: 9rem;
  color: white;
  font-family: "Allura", cursive;
  text-align: justify;
  margin-left: 80px;
}
.huntersCon p {
  font-size: 1rem;
  color: white;
  margin-left: 80px;
  padding: 0 20px;
  font-family: "Nata Sans", sans-serif;
  text-align: justify;
}
.huntersImgSlid {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.huntersImg {
  width: 500px;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 10px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.huntersImg .slider {
  width: 500px;
  height: auto;
  transition: 1s;
  position: absolute;
}

.btnss {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-left: 90px;
    margin-top: 60px;
}
.btnss button {
  width: 50px;
  height: 50px;
  border-radius: 70%;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  background: rgba(101, 98, 102, 0.5);
}

.btnss button:hover {
  background: rgba(230, 225, 231, 0.5);
  color: white;
}

.demons {
  width: 100%;
  height: auto;
  background: rgb(32, 1, 32);
  position: relative;
  display: flex;
  width: 100%;
}

.demonhead {
  width: 500%;
  height: 100vh;
  position: sticky;
  top: 0;
  background: red;
  padding: 2rem;
  box-sizing: border-box;
}

.demonCha {
  width: 500%;
  height: auto;
  overflow-y: scroll;
  padding: 4rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  color: white;
}

.demonCha img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}
.demonCha h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: white;
}
.demonCha p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  color: white;
}
2

Hi there! In my VS Code it works well.
Can you share your HTML from VS Code?
Perhaps there is some problem with linking styles

3

here is my html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="design-2.css">
    <title>Design-2</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kablammo&family=Mozilla+Headline:wght@200..700&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Allura&family=Nata+Sans:wght@100..900&display=swap"
        rel="stylesheet">

</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#lore">Lore</a></li>
                <li><a href="#hunters">Hunters</a></li>
                <li><a href="#mission">Mission</a></li>
                <li>
                    <div class="logo">
                        <img src="logo-d2.png" alt="Logo">
                    </div>
                </li>
                <li><a href="#demons">Demons</a></li>
                <li><a href="#villains">Villains</a></li>
                <li><a href="#bbj">BBJ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Kpop DEMON HUNTERS</h1>
        <div class="cha">
            <img id="baby" src="baby.png" alt="Baby">
            <img id="zoey" src="Zoey.png" alt="Zoey">
            <img id="mira" src="mira.png" alt="Mira">
            <img id="rumi" src="rumi.png" alt="Rumi">
            <img id="jinu" src="jinu.png" alt="Jinu">
            <img id="abby" src="abby.png" alt="Abby">
            <img id="romance" src="Romance.png" alt="Romance">
            <img id="mystery" src="mystery.png" alt="Mystery">
        </div>
        <div class="smoke">
            <video autoplay loop
                src="https://video.wixstatic.com/video/d47472_58cce06729c54ccb935886c4b3647274/1080p/mp4/file.mp4"
                autoplay muted></video>
            <video autoplay loop
                src="https://video.wixstatic.com/video/d47472_58cce06729c54ccb935886c4b3647274/1080p/mp4/file.mp4"
                class="v-1" autoplay muted></video>
        </div>
    </main>
    <section class="mission" id="mission">
        <div class="floating-souls" id="souls-container"></div>
        <div class="mis-b">
            <div class="mis-l">
                <p>They're not just idols.<br>
                    They're guardians of the Honmoon.<br>
                    Every beat they drop holds back the darkness.<br>
                    Every stage is a battle.<br>
                    <br>
                    This is more than fame—<br>
                    it's a fight for survival.<br>
                    it's survival.
                </p>
            </div>
            <div class="mis-r">
                <h1>Protect the Beat. Save the World.</h1>
            </div>
        </div>
    </section>
    <section class="hunters" id="hunters">
        <div class="huntersCon">
            <h1 class="hunHead"></h1>
            <p class="hunDes"></p>
            <div class="btnss">
                <button onclick="prevBtns()">
                    < </button>
                        <button onclick="nextBtns()">
                            >
                        </button>
            </div>
        </div>
        <div class="huntersImgSlid">
            <div class="huntersImg">
                <img class="slider" src="rumi.png" alt="Rumi">
                <img class="slider" src="zoey.png" alt="Zoey">
                <img class="slider" src="mira.png" alt="Mira">
            </div>
        </div>
    </section>
    <section class="demons" id="demons">
        <div class="demonhead">
            <h1>The Saja Boys</h1>
        </div>
        <div class="demonCha">
            <div class="jinu">
                <h1>Jinu</h1>
                <img src="jinu.png" alt="Jinu">
                <p>Jinu is the leader and main vocalist of the Saja Boys—a demon-turned-idol cursed to live for
                    centuries. Charismatic, cold, and supernatural fast, he uses his charm to steal souls under Gwi-Ma's
                    orders. Yet he forms a deep bond with Rumi, blurring the line between enemy and lover. In the end,
                    he sacrifices himself—true to his tragic, conflicted nature.</p>
            </div>
            <div class="Mystery">
                <h1>Mystery</h1>
                <img src="mystery.png" alt="Mystery">
                <p>Mystery is the enigmatic Saja Boy whose face is always hidden by bluish-purple hair. Calm, distant,
                    and impossible to read, he embodies secrecy and control. As a soulless demon, he helps manipulate
                    fans and events from the shadows.</p>
            </div>
            <div class="Romance">
                <h1>Romance</h1>
                <img src="romance.png" alt="Romance">
                <p>Romance plays the “heartthrob” role in the group—smooth, flirty, and attention-grabbing. He's meant
                    to charm fans into obsession before they become soul feed. More façade than substance, he vanishes
                    once his purpose is served.</p>
            </div>
            <div class="Abby">
                <h1>Abby</h1>
                <img src="abby.png" alt="Abby">
                <p>Abby is the “muscle” among the Saja Boys—tall, ripped, and intimidating. Vocals and brute strength
                    combo, he's made to overwhelm fans emotionally and physically. Killed in battle by Zoey when HUNTR/X
                    fights back.</p>
            </div>
            <div class="Baby">
                <h1>Baby</h1>
                <img src="baby.png" alt="Baby">
                <p>Baby is the baby-faced rookie rapper of the group—young, energetic, and deceptively innocent. Maknae
                    of the group, he lures in fans with apparent naivety before revealing his true demonic hunger.</p>
            </div>
        </div>
    </section>

    <script src="design-2.js"></script>
</body>

</html>
4

Thanks. Your p elements and images are at the bottom right

893417fb-3a02-4482-9620-cea7d221115d
893417fb-3a02-4482-9620-cea7d221115d1920×4037 147 KB

5

yeah they were not showinggg

6

Check the filename of stylesheet you are linking, design-2.css, is it correct?

7

Yup, also cuz my other css is working properly

8

Maybe you need to try debugging by deleting the whole rulesets for this section and applying them one by one again to find out the part that works as not intended.
Also check for unclosed rulesets

9

I’ll try that and see what’s messing it up, appreciate the help!

1 Like