<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
<a href="#aboutMe">About Me</a>
<a href="#careers">Careers</a>
<a href="#contactUs">Contact Us</a>
<a href="#webDev">Web Development</a>
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
I received assistance from an individual who utilized Bootstrap, which my instructor did not authorize. The use of bootstrap causes the text to be spaced out differently than desired. How can I maintain appropriate spacing without utilizing Bootstrap? Specifically, I wish to remove Bootstrap and still have the title "Computer Engineering" properly formatted. Any guidance on achieving this would be greatly appreciated! This pertains to my Grade 11 Engineering course.