I can't get my text to display for main text? <h3> and <p>


#1

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Resume</title>
	</head>

	<body>
	    <div id="header">
	        <h3>Resume of Rebecca</h3>
	    </div>
	   
	    <div class="left"></div>
	    
	    <div class="right">
	        <h3>Work Experience</h3> 
	        <p>This is my work experience.</p>	    
	    </div> 
	    
	    <div id="footer"></div>
    </body>
    
</html>

CSS

* {
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
}

.right h3 {
    color: black; 
}

#header h3 {
    margin: 10px auto; 
    text-align: center;
}

#header {
    background-color: pink;
    width: 100%; 
    height: 40px;
    position: fixed; 
    z-index: 1;  
}

#footer {
    background-color: pink; 
    width: 100%; 
    height: 40px;
    clear: both; 
}

.left {
    background-color: lightblue; 
    width: 5%;
    height: 300px;
    float: left;
}

.right {
    background-color: beige; 
    width: 95%; 
    height: 300px; 
    float: right;    
}

#2

@javaace57176,

I integrated your CSS rule's in a HTML-style-Element within your HTML-head-tags

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
}


#header h3 {
  margin: 10px auto; 
  text-align: center;

}

#header {
  background-color: pink;
  width: 100%; 
  height: 40px;
  position: fixed; 
  z-index: 1;

}


#footer {
  background-color: pink; 
  width: 100%; 
  height: 40px;
  clear: both;

}

.left {
   background-color: lightblue;
   margin-top:41px; 
   width: 5%;
   height: 300px;
   float: left;
}

.right {
   background-color: beige;
   margin-top:100px; 
   width: 95%; 
   height: 300px; 
   float: right; 
}
.right h3 {
   color: black; 
}

</style>
</head>
<body>
    <div id="header">
        <h3>Resume of Rebecca</h3>
    </div>
   
    <div class="left"><p>left</p></div>
    
    <div class="right">
        <h3>Work Experience</h3> 
       <p style="color:red">This is my work experience.</p>
    </div> 
    
    <div id="footer">my footer</div>
</body>
</html>

Maybe a google search
== discussions / opinions ==
css z-index site:stackoverflow.com


#3

Because your #header is fixed, it will be ignored when .left and .right position themselves, you can simple resolve this issue by pushing .left and .right down to below the #header by adding a simple margin:

.left, .right {
  margin-top: 40px;
}

how do i get this value? Simple, it is the height of the #header, since that is the distance its needs to pushed down