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

Curriculum Help
,
1

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;
}
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

3

you are missing something in this part of code

4

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

5

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

6

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