I'm attempting to create a webpage that resembles Gmail. I have a header with a background color, but when I scroll, the content in the body becomes visible.
Here is the view without scrolling:
https://i.stack.imgur.com/UQ2sO.png
However, while scrolling, it looks like this:
https://i.stack.imgur.com/M6osp.png
I would appreciate any assistance in identifying why this issue is occurring.
Note: I didn't design the email section of this page.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- File downloaded from bootdey.com @bootdey on twitter -->
<!-- All snippets are licensed under MIT license http://bootdey.com/license -->
<title>bs4 beta email inbox - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
// CSS Styling Code Goes Here
</style>
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
Logo
</div>
<nav>
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
</nav>
</div>
</header>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootdey">
<div class="email-app mb-4">
<nav>
// Navigation Information
</nav>
<main class="inbox">
<div class="toolbar">
// Toolbar information
<ul class="messages">
// Message details here
</ul>
</main>
</div>
</div>
// Script tags for jQuery and Bootstrap
</body>
</html>