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.
