Bootstrap colums wont align horizontally-CodePudding

I'm trying to add some Bootstrap elements to my portfolio after the fact and im running into some issues. My only columns added so far are in the top in the "welcome-section" Lines 40-52. They will not align horizontally. Everything I see to troubleshoot seems easy enough but trying different containers, rows, sizes, gutters, and styles etc. has not given me any results.

Could it be an element in my style.css file that's causing the columns to not align? If so are you able to see the issue? I always struggle going back to freshen up sites with new code.

I really appreciate your help. I've been stumped!

* {
    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
https://codepen.io/darkstar93/pen/MWrEErN

2. Tribute Page
https://codepen.io/darkstar93/pen/rNpzdzG

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
https://codepen.io/darkstar93/pen/rNpwROz
*/

/* 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 >
        <nav  id="navbar">
      <ul >
        <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 
            <div  id="name">
                <div  style="background-color: rgb(136, 84, 20);">
                <h1 id="hi">Hi<br>
                I am<br>
                Thomas</h1>
                </div>
                <div >
                <div  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  id="projects">
            <h2 >My Projects</h2>
            <div >
                <a  href="https://codepen.io/darkstar93/pen/rNpzdzG" target="_blank"><img alt="project"  src="https://i.imgur.com/zynvp2S.jpg">
                <p ><span >&lt;</span> Tribute Page <span >&#47;&gt;</span></p></a> <a  href="https://codepen.io/darkstar93/pen/MWrEErN" target="_blank"><img alt="project"  src="https://i.imgur.com/aDt3B1M.jpg">
                <p ><span >&lt;</span> Tesla Product Page <span >&#47;&gt;</span></p></a> <a  href="http://darkstar93.github.io/jquery-streetfighter/main.html" target="_blank"><img alt="project"  src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/ryu.png?raw=true">
                <p ><span >&lt;</span> Street Fighter <span >&#47;&gt;</span></p></a> <a  href="http://darkstar93.github.io/stackerAJAX/" target="_blank"><img alt="project"  src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4e990e20126391.58b02ab778b00.jpg">
                <p ><span >&lt;</span> Stack Overflow Reputation Builder <span >&#47;&gt;</span></p></a> <a  href="http://darkstar93.github.io/Warcraft-Quiz/" target="_blank"><img alt="project"  src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/quiz.jpg?raw=true">
                <p ><span >&lt;</span> Warcraft Quiz App <span >&#47;&gt;</span></p></a> <a  href="https://codepen.io/darkstar93/pen/yLvzWNN" target="_blank"><img alt="project"  src="https://images.unsplash.com/photo-1485988412941-77a35537dae4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1196&q=80">
                <p ><span >&lt;</span> Digital Resume <span >&#47;&gt;</span></p></a>
            </div>
        </section>
        <section id="contact">
            <div id="contact-header">
                <h1 id="work">Lets Work Together...</h1>
            </div>
            <div >
                <a  href="https://www.linkedin.com/in/turekhomes/" target="_blank"><i ></i> LinkedIn</a> <a  href="https://github.com/Darkstar93" id="profile-link" target="_blank"><i ></i> GitHub</a> <a  href="https://codepen.io/darkstar93" target="_blank"><i ></i> CodePen</a> <a  href="mailto:[email protected]"><i ></i> Email</a> <a  href="tel:801-885-6352"><i ></i> Call/Text Me</a>
            </div>
        </section>
        
    </div>
</body>
</html>

CodePudding user response：

In your code snippet, the immediate child column div within #name row div, you have started a new child row element within this #name row.

You should not start child rows within another row element.

It should aways be .row > .col > .row > .col etc...

Never do this... .row > .row > .col... this will just output unexpected results