New to HTML and CSS, wanted to know how to break lines or seperate the contents

New to HTML and CSS, wanted to know how to break lines or seperate the contents. I wanted the contents seperate but somehow it just breaks or overlaps on another. I wanted the lessons to keep on one html so I could test different things as i go. So after 3 or breaking line the red and blue boxes doesn’t show. And I wanna know why as well. I keep the HTML and CSS files seperately so here it is:

Thanks in advance coders!

HTML:

<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css">

<div class="fullcard" id="thumbnail">
	<div class="cardContent">
		<div class="cardtext">
		  <h4>Google</h4>
			<hr>
			<p><s><strong>Google</strong></s> Alphabet was founded by <em>Larry Page</em> and <em>Sergey Brin </em> while they were Ph.D students at <u>Stanford University</u>.</p>
		</div>
		<div class="cardlinks">
		  <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links"> Larry Page</a>
			<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links"> Sergei Brin</a>
		
		</div>
	
	</div>
	
</div>
<h5>Welcome</h5>
	<section>
		<form id="searchbar">
		<label for="search">Search:</label>
		<input type="search" id="search" name="search">
			<input type="submit" name="submit" value="GO"
		
		
		</form>
	
	
	</section>
		<br />
		<br />
		<hr>
<section>
		<h1 class="boxes"><strong>3</strong></h1>
	<div class="first"></div>
	<div class="second"></div>	
	
</section>

CSS CODES

h4 {
	text-align: center;
	padding: 10px;
	background-color: rgba(45,45,45,0.1);	
	font-size: 27px; 
	text-transform: uppercase;
	font-weight: 300;
  }

  p {
    font-weight: bold;
	top: 25px;
	
  }
  .links {
    margin-right: 20px;
    opacity: 0.5;
	
  }
  .fullCard {
    border-style: solid;
	border-color:black;
    border-radius: 5px;
    margin: 20px 50px;
    padding: 4px;
	  width: auto;
	 
  }
  .cardContent {
    padding: 10px;
  }
#thumbnail {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
a {
	color:#000;
}
a:hover {
	color:blue;
}

#searchbar {
	position: absolute;
	left:60px;
	top:auto;
	
}

.boxes {
	width: 60%;
	height: 200px;
	margin-top: 20px;
}

.first {
	background-color: red;
	position: absolute;
	z-index: 1;
}
.second {
	background-color: blue;
	position: absolute;
	z-index: 2;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

you are missing something in this part of code

omg didn’t check my post. LoL I guess coders forums are for smart people :smiley: Thanks tons.

you are missing something in this part of code

I think it’s not the closing bracket. My last section still not showing up. The two rectangles with z-index lesson is not showing up. What am I missing here?
Thanks

have you added the closing bracket at least?

about things disappearing and overlapping: if you use absolute position for elements then they will be removed by flow of the page, and they can be positioned overlapping with other things