Bootstrap colums wont align horizontally

* {
margin: 0;
}
html, body {
margin: 0;
font-family: roboto;
scroll-behavior: smooth;
}
/* nav*/

/* sections */

#welcome-section {
min-width: 100vw;
min-height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
}
#hi {
padding-left: 5vw;
font-size: 200vh;
font-size: 12vw;
padding-bottom: 4%;
padding-top: 4vh;
margin: auto;
line-height: 0.9em;
color: white;
}

#job-title {
padding-left: 5vw;
font-size: min(3vw, 36px);
font-style: italic;
line-height: 0.9em;
color: white;
}

#projects {
background-color: #344966;
min-height: 100vh;
}
.projects-section-header {
color: white;
font-size: 40px;
padding: 5%;
text-align: center;
margin: 0 auto;
}
#contact {
background-color: #6D9DC5;
min-height: 100vh;
}
#welcome-section {
background: linear-gradient(92deg, #2e3192, #1bffff);
background-size: 400% 400%;
-webkit-animation: bluegradient 59s ease infinite;
-moz-animation: bluegradient 59s ease infinite;
animation: bluegradient 59s ease infinite;
}
@-webkit-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
/*

1. Tesla Product Page

2. Tribute Page

3. Street Fighter jQuery
http://darkstar93.github.io/jquery-streetfighter/main.html

4. Warcraft Quiz App
http://darkstar93.github.io/quiz/

5. Instagram API Hack
http://darkstar93.github.io/instagramapihack/

6. Input Survey Form

*/

/* Custom properties/variables */

:root {
–main-white: #f0f0f0;
–main-red: #be3144;
–main-blue: #8797B2;
–main-gray: #000807;
}
/* Base reset */

* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */

*, *::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */

body {
font-family: ‘roboto’, sans-serif;
font-size: 1.8rem;
/* 18px */
font-weight: 400;
line-height: 1.4;
color: var(–main-white);
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(–main-white);
}
img {
display: block;
width: 100%;
}
/* Projects section */

.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(–main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
var(–main-white);
}
@media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}

.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
padding: 28px;
}
@media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(–main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 25px;
}
.code {
color: var(–main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% – 6.8rem);
width: 100%;
object-fit: cover;
border-radius: 25px;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
text-align: center;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(–main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(–main-red);
}
.btn-show-all:hover>i {
transform: translateX(2px);
}
.btn-show-all>i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
@media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
/*blinking */

.blinking-cursor {
font-weight: 100;
font-size: 50px;
color: white;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes “blink” {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes “blink” {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes “blink” {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes “blink” {
from, to {
color: transparent;
}
50% {
color: black;
}
}
.contact-links {
text-align: center;
width: 100%;
max-width: 100%;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 3rem;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
color: black;
}
i {
color: white;
}
#work {
text-align: center;
margin: 0 auto;
padding: 50px;
}

.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}

.nav-list {
display: flex;
margin-right: 2rem;
}

@media (max-width: 28.75em) {
.nav {
justify-content: center;
}

.nav-list {
margin: 0 1rem;
}
}

.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}

.nav-list a:hover {
background: var(–main-blue);
}
<!DOCTYPE html>
<html>
<head>
<!doctype html>
<html lang=”en”>
<head>
<title>Title</title>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
</head>
<body>

<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
</body>
</html>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link href=”https://use.fontawesome.com/releases/v5.8.2/css/all.css” rel=”stylesheet”>
<title></title>

</head>
<body>
<div class=”background”>
<nav class=”nav” id=”navbar”>
<ul class=”nav-list”>
<li><a href=”#welcome-section”>About</a></li>
<li><a href=”#projects”>Projects</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>

</nav>
<section id=”welcome-section”>
<div class=”container-fluid”
<div class=”row justify-content-start” id=”name”>
<div class=”col-sm-6″ style=”background-color: rgb(136, 84, 20);”>
<h1 id=”hi”>Hi<br>
I am<br>
Thomas</h1>
</div>
<div class=”row”>
<div class=”col-sm-4 justify-content-end” style=”background-color: rgb(114, 114, 114);”><p>I’m highly motivated and passionate about development and creative design. I challenge myself every day to be a little better and increase my skills. </p></div>
</div>
</div>
</div>
<h1 id=”job-title”></h1>
</section>
<section class=”projects-section” id=”projects”>
<h2 class=”projects-section-header”>My Projects</h2>
<div class=”projects-grid”>
<a class=”project project-tile” href=”https://codepen.io/darkstar93/pen/rNpzdzG” target=”_blank”><img alt=”project” class=”project-image” src=”https://i.imgur.com/zynvp2S.jpg”>
<p class=”project-title”><span class=”code”>&lt;</span> Tribute Page <span class=”code”>/&gt;</span></p></a> <a class=”project project-tile” href=”https://codepen.io/darkstar93/pen/MWrEErN” target=”_blank”><img alt=”project” class=”project-image” src=”https://i.imgur.com/aDt3B1M.jpg”>
<p class=”project-title”><span class=”code”>&lt;</span> Tesla Product Page <span class=”code”>/&gt;</span></p></a> <a class=”project project-tile” href=”http://darkstar93.github.io/jquery-streetfighter/main.html” target=”_blank”><img alt=”project” class=”project-image” src=”https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/ryu.png?raw=true”>
<p class=”project-title”><span class=”code”>&lt;</span> Street Fighter <span class=”code”>/&gt;</span></p></a> <a class=”project project-tile” href=”http://darkstar93.github.io/stackerAJAX/” target=”_blank”><img alt=”project” class=”project-image” src=”https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4e990e20126391.58b02ab778b00.jpg”>
<p class=”project-title”><span class=”code”>&lt;</span> Stack Overflow Reputation Builder <span class=”code”>/&gt;</span></p></a> <a class=”project project-tile” href=”http://darkstar93.github.io/Warcraft-Quiz/” target=”_blank”><img alt=”project” class=”project-image” src=”https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/quiz.jpg?raw=true”>
<p class=”project-title”><span class=”code”>&lt;</span> Warcraft Quiz App <span class=”code”>/&gt;</span></p></a> <a class=”project project-tile” href=”https://codepen.io/darkstar93/pen/yLvzWNN” target=”_blank”><img alt=”project” class=”project-image” src=”https://images.unsplash.com/photo-1485988412941-77a35537dae4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1196&q=80″>
<p class=”project-title”><span class=”code”>&lt;</span> Digital Resume <span class=”code”>/&gt;</span></p></a>
</div>
</section>
<section id=”contact”>
<div id=”contact-header”>
<h1 id=”work”>Lets Work Together…</h1>
</div>
<div class=”contact-links”>
<a class=”btn contact-details” href=”https://www.linkedin.com/in/turekhomes/” target=”_blank”><i class=”fab fa-linkedin”></i> LinkedIn</a> <a class=”btn contact-details” href=”https://github.com/Darkstar93″ id=”profile-link” target=”_blank”><i class=”fab fa-github”></i> GitHub</a> <a class=”btn contact-details” href=”https://codepen.io/darkstar93″ target=”_blank”><i class=”fab fa-codepen”></i> CodePen</a> <a class=”btn contact-details” href=”mailto:thomasturek93@gmail.com”><i class=”fas fa-at”></i> Email</a> <a class=”btn contact-details” href=”tel:801-885-6352″><i class=”fas fa-mobile-alt”></i> Call/Text Me</a>
</div>
</section>

</div>
</body>
</html>