'HTML file not updating anything I add

I have been racking my brain for the past hour trying to get my HTML file to display what I'm adding. This is an example of my code :

@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Rubik:wght@300&display=swap');

html {
    height: 100%;
}

body {
    margin: 0;
}


/* Header that contains logo, horizontal navigation, and lists. */
.container {
    width: 80%;
    height: 200px;
    margin: 0;
}

header {
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    background-color: rgb(31,150,196);
    background-image: linear-gradient(160deg, rgba(31,150,196,1) 0%, rgba(52,165,175,1) 50%, rgba(173,225,230,1) 100%);
}

header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    float: left;
    padding: 50px 15px 30px 150px;
    width: 550px;
    height: 200px;
}

nav {
    float: left;
    
}

nav ul {
    margin: 0;
    padding: 70px 15px 15px 15px;
    list-style: none;
    font-weight: 500;
    font-size: 25px;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 30px;

    position: relative;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}

nav a::before {
    content: '';
    display: block;
    height: 5px;
    width: 100%;
    background-color: #ffffff;

    position: absolute;
    top: 0;
    width: 0;

    transition: all ease-in-out 200ms;
}

nav a:hover::before {
    width: 100%;
}
/* Header that contains logo, horizontal navigation, and lists. End. */

/* Sidebar. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Rubik', sans-serif;
}

.wrapper {
    display: flex;
    position: relative;
}

.wrapper .sidebar {
    position: fixed;
    width: 200px;
    height: 100%;
    background: #b9b9b9;
    padding : 35px 0;
}

.wrapper .sidebar h2 {
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
    font-size: 35px;
}

.wrapper .sidebar ul li {
    padding: 25px;
}

.wrapper .sidebar ul li a {
    color: #1A5276;
    display: block;
    font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <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=Fredoka&family=Rubik:wght@500&display=swap" rel="stylesheet">
    <title>BigPay - Banking Made Easier</title>
    <script src="https://kit.fontawesome.com/4b00a26c1e.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <div class="container">
            <img src="pics/bigpay-logo.png" alt="company-logo" class="logo" />
                <nav class="navbar">
                    <ul>
                        <li><a href="#">HOME</a></li> 
                        <li><a href="#">ANALYTICS</a></li>
                        <li><a href="#">PAYMENTS</a></li>
                        <li><a href="#">CARD</a></li>
                        <li><a href="#">SETTINGS</a></li>
                    </ul>
                </nav>

        </div>
    </header>

    <div class="wrapper">
       <div class="sidebar">
           <h2>Menu</h2>
            <ul>
                <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i> Search</a></li>
                <li><a href="#"><i class="fa-solid fa-calendar"></i> Date</a></li>
                <li><a href="#"><i class="fa-solid fa-book"></i> Category</a></li>
                <li><a href="#"><i class="fa-solid fa-money-bill"></i> Amount</a></li>
                <li><a href="#"><i class="fa-solid fa-globe"></i> Country</a></li>
                <li><a href="#"><i class="fa-solid fa-filter"></i> Type</a></li>
            </ul>
       </div>
    </div>

    <h1>Hello</h1>

</body>
</html>

The problem arises when I'm adding more content to the page in the HTML file, specifically the h1 tag that has Hello inside it. Even when I had Live Server turned on on my VSCode, it still will not update anything to the browser. I have tried closing and opening the browser twice, I even closed my VSCode and opened it again but it still will not update anything. I have restarted my computer, I tried to open the html on Internet Explorer and it's still not updating the h1 tag that I added. Before turning off my computer I have saved the code but it was fine, just a normal save. Plus, I even tried to make a new html with just the word hello wrapped in a h1 tag, that worked. But not my previous code.

Before you guys ask, I have looked through the questions of the same problem on here but nothing really applies to my problem. I have never had this happened before and I do not want to restart writing my code. The reason I added the CSS in here also is because I cannot, for the life of me, figure out what went wrong.

I went through this question :

Why is my HTML file not displaying to the browser?

and the answers have not helped.

Any replies will be greatly appreciated and I thank you very much for taking the time to help me out on this matter.

htmlcss


Solution 1:[1]

A small trick you can do to the HTML is this:

<link rel="stylesheet" href="style.css?ver=1">

then increment ver each time you do a change.

That way you are tricking the browser to believe there is a new version of the file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Trond

Related Questions