Wordpress nav bar is transparent on most pages

Alright so I gave up on getting bootstrap menu to work and am now trying to get the wordpress menu to work. Just having one problem - it works fine on the first (home) page but everywhere else it seems to be transparent. I want it to be fixed at the top but the content is still at the top. Not sure what I am doing wrong. Any help would be appreciated. I took a screenshot of it as well.

header.php code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	
	<?php wp_head();?>

</head>
<body>
	



<header>


	<div class="container">


		<?php 
	
			wp_nav_menu(
					array(

						'theme_location' => 'top-menu',
						//'menu' => 'Top Bar'
						'menu_class' => 'top-bar'
					)
			);
		
		?>
	</div>


</header>

The front-page.php seems to be working since it is the only one displaying the navigation right:

<?php get_header();?>


<section class="page-wrap">
<div class="container">
	
			
			<h1><?php the_title();?></h1>

			<?php get_template_part('includes/section','content');?>

			<?php get_search_form();?>



</div>
</section>


<?php get_footer();?>

page.php

<?php get_header();?>

<section class="page-wrap">
<div class="container">
	


		<section class="row">

		
			<div class="col-lg-3">
				

						<?php if( is_active_sidebar('page-sidebar') ):?>
					
								<?php dynamic_sidebar('page-sidebar');?>

						<?php endif;?>


			</div>




			<div class="col-lg-9">


				<h1><?php the_title();?></h1>


				
				<?php if(has_post_thumbnail()):?>

					<img src="<?php the_post_thumbnail_url('blog-large');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail">

				<?php endif;?>


				<?php get_template_part('includes/section','content');?>
				

			</div>


	</section>



</div>
</section>


<?php get_footer();?>

and my main.css CSS file:

header {
	background:white;
	width:100%;
	height:120px;
	position:fixed;
}



.widget {
	list-style-type:none;
	margin:0;
	padding:0;
}



.page-wrap {
	padding:2rem 0;
}

li.current_page_item a{
	text-decoration: none;
    border-bottom: 5px solid #FC2828;
	color:#FC2828 !important;
}

header .top-bar {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
}


header .container {
	display:flex;
	justify-content: center;
	align-items:center;
	height:100%;
}

header .top-bar li a {
	padding:.25rem 1rem;
	color:black;
}

header .top-bar li {
	position:relative;
}

header .top-bar li:first-child a {
	padding-left:0;
}

header .top-bar li:last-child a {
	padding-right:0;
}


header .top-bar li .sub-menu {
	display:none;
	position:absolute;
	z-index:999;
	top:100%;
	left:0;
	background:#fff;
	box-shadow:1px 1px 10px rgba(0,0,0,0.1);
	margin:0;
	padding:0;
	list-style-type:none;
	width:200px;
	border-radius:.5rem;
}


header .top-bar li .sub-menu a {
	color:red;
	padding:.25rem;
	text-align:center;
	display:block;

	/*text-decoration:none;*/
}


header .top-bar li .sub-menu a:hover {
	color:black;
}


header .top-bar > .menu-item-has-children:hover > .sub-menu{
  display:block;
}



header .top-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
	display:block;
} 


header .top-bar .sub-menu li .sub-menu {
	top:0;
	left:100%;
}






.enquiry_form .gform_button {
	width:100% !important;
	background:green !important;
	color:#fff !important;
	display:block !important;
	border:0 !important;
	padding:1rem !important;
}

.enquiry_form .gform_footer {
	margin:0 !important;
}

.enquiry_form input {
	width:100% !important;
}

.enquiry_form .gform_confirmation_message {
	font-size:2rem;
	text-align:center;
	line-height:1.3em;
}

.enquiry_form li.gfield {
	padding-right: 0 !important;
}

There are other files so let me know if those may be needed.

Thanks!

I have to run, but have you checked that the content following the header has a margin that is the height of the header?

Thanks for the response! That could be part of it, but the navigation does stay the same as you scroll, it just becomes background transparent. The header is supposed to have a white background throughout:

header {
	background:white;
	width:100%;
	height:110px;
	position:fixed;
}

This is how it looks on the Home (front) page:


Thats the goal right now.

What CSS selector would I use to first try what you are suggesting: putting the content down about 110px’s on every page? Also, what could I do to have the white background persist as it scrolls on the other pages as it does the main?

Honestly I am getting confused and frustrated here, because it seems when I make some changes they are not always being automatically added. Like I took the header CSS style: position:fixed; off to debug a bit and it still did the fixed position on my site. I am working locally with laragon and not all my changes are being seen immediately like that. That is making me really frustrated!

Here is how it looks after scrolling on a different page: (the menu becomes transparent)