Following a toturial. Why does my website look different than his?

HTML-CSS
1

Weird, I added a link above the divs and now it works.

[Album] Imgur

Link to video: https://www.youtube.com/watch?v=kbLfWKGVsMQ&t=1926s (I’m at 47:33)

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Victor K. Portoflio Page</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css">
   
  </head>
<body>

<header>
		<h3>Home</h3>
		<nav>
	   <ul>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
				<a class="header-cases" href="#">Cases</a>

	</nav>

</header>

<main>
	<section class="index-banner">
	<div class="vertical-center">
		<h2>I AM A FREELANCE WEB DEVELOPER</h2>
		<h1>Hello ello ello ello ello ello ello ello ello 
		ello ello ello ello ello ello ello ello ello ello 
		</h1>
	</div>
	</section>
	<section class="index-links">
		<div class="index-boxlink-square">
		<h3>PROJECTS</h3>
		</div>
		
		<div class="index-boxlink-rectangle">
		<h3>CONTACT</h3>
		</div>
		
		<div class="index-boxlink-square">
		<h3>PORTFOLIO</h3>
		</div>
		
		<div class="index-boxlink-rectangle">
		<h3>ABOUT</h3>
		</div>
		
		<div class="index-boxlink-square">
		<h3>CONTACT</h3>
		</div>
		
		<div class="index-boxlink-square">
		<h3>CONTACT</h3>
		</div>
		
	</section>
</main>










</body>
</html>

* {
	text-decoration: none;
}

body {
	
	
}
header {
	backgrond-color: #fff;
	width: 100%;
	height: 100px;
}

header .header-brand {
	font-family: Arial;
	font-size: 25px;
	font-weight: bold;
	color: #111;
	text-transform: uppercase;
	display: block;
	margin: 0 auto;
	text-align: center;
	padding: 20px 0;
}

header nav ul {
	display: block;
	margin: 0 auto;
	width: fit-content;
	
}
header nav ul li {
	display: inline-block;
	float: left;
	list-style: none;
	padding: 0 16px;
	
}

header nav ul li a {
	font-family: Arial;
	font-size: 17px;
	font-weight: bold;
	color: #111;
}

header .header-cases {
	display: none;
}

.index-banner {
	width: 100%;
	height: calc(100vh-100px);
	background-image: url('imagealien.jpg');
	background-repeat: no-repeat; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: table;
}

.vertical-center {
	display: table-cell;
	vertical-align: middle;
}

.index-banner h2 {
	font-size: 60px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 69px;
	text-shadow: 2px 2px 8px black;
}
.index-banner h3 {
	font-size: 60px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px 8px black;
}

.index-banner h1 {
	font-size: 28px;
	color: #fff;
	font-style: italic;
	line-height: 40px;
	text-align: center;
	text-shadow: 2px 2px 8px black;
}

.index-links div {
	margin: 16px 16px 0;
	width: calc(100%-32px);
	height: 100px;
	background-color: #f2f2f2;
}
.index-links div h3 {
	font-family: Arial;
	font-size: 28px;
	color: #111;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	text-shadow: 2px 2px 8px black;
	line-height: 100px;
}
1 Like
2

You mean these?

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" type="text/css">

Yes, your code needs those to load boostrap and your style.css. Without those, it wouldn
t connect up to those and they would have no effect.