HTML file not updating anything I add-CodePudding

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 >
            <img src="pics/bigpay-logo.png" alt="company-logo"  />
                <nav >
                    <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 >
       <div >
           <h2>Menu</h2>
            <ul>
                <li><a href="#"><i ></i> Search</a></li>
                <li><a href="#"><i ></i> Date</a></li>
                <li><a href="#"><i ></i> Category</a></li>
                <li><a href="#"><i ></i> Amount</a></li>
                <li><a href="#"><i ></i> Country</a></li>
                <li><a href="#"><i ></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.

CodePudding user response：

Are you sure the text isn't just blending with the background? Can you find h1 in the dev tools?

What happens if you put it in the div.container?

You can also try CTRL F5 to do a hard refresh of the page in the browser.

EDIT:

Found it. Your .wrapper.sidebar is fixed and is covering the h1. You need to make another div to account for this, or come up with a different solution. Here is one example:

HTML

<div class='foundIt'>
  <h1>Hello</h1>
</div>

CSS

.foundIt {
  margin-left: 200px;
}

.foundIt's margin-left accounts for the .wrapper.sidebar width size. Hope this helps!

CodePudding user response：

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.