CSS file is only running part of the code

Question

Im building a website, but my HTML and CSS are bugging. When I load my website through Github Pages, or through local files, I can see my HTML and it all works perfectly fine. The problem is, only part of my CSS is loading.

In my website I made a sidebar, and when I tested it through local files it worked fine. Yesterday I opened Notepad++ (I cant install VSCode on this computer) and opened my website to test what size font was the best.

When I opened it, some of the CSS didn't work. My background image is gone, and my sidebar was moved to under my text, and also it expanded the entire screen. Also all of my color was removed from my sidebar. I tried this with github pages, but it was also bugged their.

Some of my CSS is still working, but around half is not working. I made a new CSS and HTML document and copied all of the code, changing the link and it was still bugged.


<html> 
<head>
<link rel="stylesheet" href="GithubTestCSS.css">
        
    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>
        <div class="main-text">
            <p> text</p>
            <p> text</p>
            <p> text </p>
            <p> text </p>
            <p> text </p>
        
        </div>

</head>
<body>

  <header class="header" role="banner">
  
  <div class="logo">
    <a href="#">Home</a>
  </div>
  
  <div class="nav-wrap">
    <nav class="main-nav" role="navigation">
    
      <ul class="unstyled list-hover-slide">
      
        <li><a href="#">Poems</a></li>
        <li><a href="#">Collages</a></li>
        <li><a href="#">Art</a></li>
        <li><a href="#">Infographics</a></li>
        
      </ul>
      
    </nav>
   </div>
   
</head>
</body>
</html>

  
  .bg-text {
  position: center;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */
  color: white;
  font-weight: bold;
  font-size: 28px;
  border: 5px solid #f1f1f1; 
  position: fixed;
  margin-right: 50px;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 5px; 
}
 
  
  
  
  
  .unstyled a {
    text-decoration: none;
  }
  
  .list-inline {
    overflow: hidden;
  }
  .list-inline li {
    float: left;
  }
  
  
  .logo {
    font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  /* The logo (top of sidebar*/
  
  .logo a {
    display: block;
    padding: 1em 0;
    color: #03A062;
    text-decoration: none;
    transition: .75s linear color;
  }
  
  
  /* The sidebar */
  
  .main-nav ul {
    border-top: solid 1px #3C3735;
  }
  .main-nav li {
    border-bottom: solid 1px #3C3735;
  }
  .main-nav a {
    padding: 1.1em 0;
    color: #03A062;
    font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
    text-align: center;
  }
  .main-nav a:hover {
    color: #03A062;
  }
  
  
  .list-hover-slide li {
    position: relative;
    overflow: hidden; 
  }
  .list-hover-slide a {
    display: block;
    position: relative;
    z-index: 1;
    transition: .75s ease color;
  }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #03A062;
    background: #3C3735;
    transition: .75s ease left;
  }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0;
  } 
  .testing-text{
      text-align: center;
      color: #fff;
  }

Answer 1

Well first you can't put HTML like that in the header. Put it all in the <body> tag.
You did not close the <h1> tag.
you did not close the <header> tag.
Then you have an error in the html in the bottom: " </head></body></html> ".. you already closed the head.

So it's going to be something like this:

<html>
<head>
    <link rel="stylesheet" href="GithubTestCSS.css">
</head>
<body>

    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text </h1>
    <div class="main-text">
        <p> text</p>
        <p> text</p>
        <p> text </p>
        <p> text </p>
        <p> text </p>

    </div>
    <header class="header" role="banner">
        <div class="logo">
            <a href="#">Home</a>
        </div>

        <div class="nav-wrap">
            <nav class="main-nav" role="navigation">

                <ul class="unstyled list-hover-slide">
                    <li><a href="#">Poems</a></li>
                    <li><a href="#">Collages</a></li>
                    <li><a href="#">Art</a></li>
                    <li><a href="#">Infographics</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>
</html>

Answer 2

There are a few other things, for example no quotes around Comic Sans Serif.

 <html> <head> <link rel="stylesheet" href="GithubTestCSS.css"> <title></title> </head> <body> <h1 style="text-align: center; color: #fff; font-size: 40px; font-family: 'Comic Sans MS'; margin-left: 425px;"> Text </h1> <div class="main-text"> <p> text </p> <p> text </p> <p> text </p> <p> text </p> <p> text </p> </div> <header class="header" role="banner"> <div class="logo"> <a href="#">Home</a> </div> <div class="nav-wrap"> <nav class="main-nav" role="navigation"> <ul class="unstyled list-hover-slide"> <li><a href="#">Poems</a></li> <li><a href="#">Collages</a></li> <li><a href="#">Art</a></li> <li><a href="#">Infographics</a></li> </ul> </nav> </div> </header> </body> </html>

CSS file is only running part of the code

Question

2 answers

solution1
1 2022-01-21 18:37:39

solution2
0 2022-01-31 23:38:40

CSS file is only running part of the code

Question

2 answers

solution1 1 2022-01-21 18:37:39

solution2 0 2022-01-31 23:38:40

solution1
1 2022-01-21 18:37:39

solution2
0 2022-01-31 23:38:40