Facing problem in setting margins in bootsrap cards

Facing problem in setting margins in bootsrap cards - html

I am working on a mobile website ( 360x640) .
Firstly, I am not able to fill the empty spaces on the right with text in the talk to astrologer section . I am not able to shift 25 years of text on the right side.
Secondly, I am not able to align font awesome with the text .
Can someone help me in setting margins so that it looks exactly similar to what I want ??
Thirdly , Phone font awesome which I want <i class="fas fa-phone-alt"></i> is not working ,
What do I want to achieve ??
My Frontend
Please help in achieving what I want to !!!!
body {
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
font-size: 30px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 30px;
}
.experience {
float: right;
}
.orange {
background-color: #f78336;
font-size: 30px;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../assets/talk.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Talk to an Astrologer</title>
</head>
<body>
<!-- Search bar-->
<div class ="search-bar sticky-top " >
<ul class="navbar navbar-light bg-light justify-content-end ">
<a class="navbar-brand " href="# ">
<img src="../assets/search.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/filter.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/sort.png " width="30 " height="30 " alt=" ">
</a>
</ul>
</div>
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<h1><b>Talk to an Astrologer</b></h1>
<div class="card flex-row flex-wrap mb-3 mx-3 ">
<div class="card-header border-0 ">
<img src="//placehold.it/200 " width="200 " height ="200 " alt=" ">
</div>
<div class="card-block mx-2 ">
<span style ="float: right; "class ="experience ">25 years</span>
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave "></i><b>₹100/Min</b></p>
<i class="fas fa-phone " style = color:white></i>Talk on Call
</div>
</div>
</div>
</div>
</body>
</html>

try this one it will work as expected ,
<body>
<!-- Search bar-->
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<h1><b>Talk to an Astrologer</b></h1>
<div class="card ">
<div class="card-header border-0 ">
<img src="//placehold.it/200 " width="200 " height ="200 " alt=" ">
</div>
<div class="card-block mx-2 ">
<div style="display: flex; flex-direction: row; place-content: space-between; width: 100%">
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<span style ="float: right; " class ="experience ">25 years</span>
</div>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave "></i><b>₹100/Min</b></p>
<div class="btn orange call-btn">
<i class="fas fa-phone " style = color:white></i>
Talk on Call
</div>
</div>
</div>
</div>
</div>
</body>
css ,
body {
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
font-size: 20px!important;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 20px !important;
}
.experience {
float: right;
}
.orange {
background-color: #f78336;
font-size: 20px !important;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
.card{
border: 1px solid #707070;
display: flex;
flex-direction: row;
flex-flow: row;
place-content: stretch;
justify-content: start;
width: 100%;
padding-bottom: 20px;
}
.card-block{
width: 100%;
}
.card-header{
height: 300px;
width: 300px;
}
for font check wheather you add the font awesome script of install locally the font awasome in you project

Can you try the following code. It is not perfect but its OK i guess.
body {
margin: 0px;
font-size: 30px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 30px;
}
.orange {
background-color: #f78336;
font-size: 30px;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
.card{
max-width: 750px;
width: auto;
}
.fas,.fa{
margin-right: 10px;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Talk to an Astrologer</title>
</head>
<body>
<!-- Search bar-->
<ul class="navbar navbar-light bg-light justify-content-between">
<h1><b>Talk to an Astrologer</b></h1>
<div>
<a class="navbar-brand " href="# ">
<img src="../assets/search.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/filter.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/sort.png " width="30 " height="30 " alt=" ">
</a>
</div>
</ul>
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<div class="card flex-row flex-wrap mb-3 justify-content-between" >
<div class="card-header border-0 w-1/4">
<img src="//placehold.it/200 "alt=" ">
</div>
<div class="card-block flex justify-content-between w-3/4 mx-auto">
<span style ="float: right; "class ="experience text-center">25 years</span>
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave"></i><b>₹100/Min</b></p>
<i class="fa fa-phone " style = color:white></i>Talk on Call
</div>
</div>
</div>
</div>
</body>
</html>

Related

text-break, word-break, all breaks do not work anymore for no apparent reason

I had this issue fixed with text-break from bootstrap, but for some reason, something is overriding it and now my text does not wrap at all. I put a code snippet that reproduces the issue. I've tried everything and I am sure I am missing something silly. I'm only typing now because stackoverflow wants me to. You can ignore the next set of random thoughts.
.comment_input{
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name{
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.post{
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding{
margin: 5px;
}
.post_comment{
display: flex;
align-items: center;
gap: 5px;
}
.post_top{
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment{
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more{
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk{
display: flex;
font-size: 14px;
gap: 5px;
}
.right{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body{
word-wrap : break-word;
overflow-wrap: break-word;
}
.user{
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: max-content;
word-wrap : break-word;
overflow-wrap: break-word;
}
.like-comment, .reply_comment{
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">1</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40"><!--Append Replies Here-->
<div class="lk">
<script id="counter46">0</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46"><!--Nested Replies go here--></div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

You used max-content for your width in your user container.
The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. -MDN
You can change that to 100%. You can learn more on max-content here.
.comment_input {
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name {
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.post {
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding {
margin: 5px;
}
.post_comment {
display: flex;
align-items: center;
gap: 5px;
}
.post_top {
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment {
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk {
display: flex;
font-size: 14px;
gap: 5px;
}
.right {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body {
word-wrap: break-word;
overflow-wrap: break-word;
}
.user {
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.like-comment,
.reply_comment {
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">
1
</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40">
<!--Append Replies Here-->
<div class="lk">
<script id="counter46">
0
</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46">
<!--Nested Replies go here-->
</div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

Make these columns equal height

I'm having trouble making these columns equal height. When the title is longer it pushes the column down and makes it larger than the others. how can I make the columns equal height even when the length of the titles are different?
I tried these answers: How can I make Bootstrap columns all the same height?
but they didn't work.
I'm using Bootstrap 4.
Here is my code:
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Just adding some class and you will be fine:
Add d-flex h-100 flex-column to course-container to make it full height and still appear as intended.
Another 'mt-autotocourse-bottom-container` to make the bottom box always in the bottom no matter what.
Edit: I'm just adding to the second box so you can compare the different, add the same to other box will achieve what you want.
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container d-flex h-100 flex-column">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container mt-auto">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Your columns are already the same height, you just have to set the height of your course-container to 100% to see it. If you then also want to have the footer aligned the same over each card and stuff, you can achieve this by styling your cards with flexbox.
Also check out bootstrap's card components, these might be helpful to you as a starting point:
#courses1 {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#courses1::before {
background-color: #ffffff;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
}
#courses1 .course-list {
margin-top: 55px;
}
#courses1 .course-list .course-container {
border-width: 1px;
border-color: #e6e5e5;
border-style: solid;
height: 100%; /* To show that all columns have same height! */
}
#courses1 .course-list .course-container .course-title {
margin-top: 25px;
margin-bottom: 25px;
}
#courses1 .course-list .course-container .course-title h5 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#courses1 .course-list .course-container .course-title h5 a {
font-weight: 600;
color: #101111;
}
#courses1 .course-list .course-container .course-image img {
width: 100%;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-top-width: 1px;
border-top-color: #e6e5e5;
border-top-style: solid;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-icons {
color: rgb(128, 129, 129);
font-size: 14px;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .free-course p {
color: rgb(7, 134, 113);
font-size: 14px;
font-weight: 600;
}
#courses1 .course-list .course-container .course-bottom-container .course-meta .course-pricing a {
color: rgb(231, 80, 10);
font-size: 14px;
font-weight: 600;line-height: 24px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="courses1">
<div class="container">
<div class="row course-list">
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is a post with a long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Short title post
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
This is another post with a very long, long, long title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="free-course">
<p>FREE</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 course-list-col">
<div class="course-container">
<div class="course-image">
<img src="https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__340.jpg" alt="" class="img-fluid">
</div>
<div class="course-title">
<h5>
Another short title
</h5>
</div>
<div class="course-bottom-container">
<div class="course-meta d-flex justify-content-between">
<div class="course-icons">
<i class="fas fa-users" aria-hidden="true"></i> 369
<i class="fas fa-comments" aria-hidden="true" style="margin-left: 10px;"></i> 187
</div>
<div class="course-pricing">
<p>$49 <i class="fas fa-shopping-cart"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Bootstrap 4 full-width padding issue is causing a scrollbar and white space

I have a thin white line that is hard to see on the right side of my website. You can notice it if you scroll to the right on the webpage. Using DevTools it looks like it is 15px padding.
I am trying to remove this and I have tried to find the item that is causing this but I can't seem to find it. What could be causing the problem?
Image of white line:
Url of site: https://grobconnolly.github.io/cloverweb/
#import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
font-family: "Montserrat", sans-serif;
color: #636468;
font-weight: 300;
}
.service-5 h1,
.service-5 h2,
.service-5 h3,
.service-5 h4,
.service-5 h5,
.service-5 h6 {
color: #3e4555;
}
.service-5 a {
text-decoration: none;
}
.service-5 .linking {
color: #3e4555;
}
.service-5 .linking:hover {
color: #316ce8;
}
.service-5 .font-weight-medium {
font-weight: 500;
}
.service-5 .bg-light {
background-color: #f4f8fa !important;
}
.service-5 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.service-5 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-5 .wrap-service5-box .card-body {
padding: 30px;
}
.service-5 .wrap-service5-box .text-success-gradiant {
background: #f47820;
background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
background: linear-gradient(to right, #f47820 0%, #f47820 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.service-5 .wrap-service5-box .icon-size {
font-size: 45px;
}
.service-5 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
#textWhite {
color: white;
font-size: 25px;
}
.featureSection {
margin-top: 30px;
}
.ourFeatures {
margin-bottom: 50px;
}
* {
font-family: "Montserrat", sans-serif;
color: #636468;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-bottom: .3%;
}
#subHeroText {
font-size: 40px;
font-weight: 400;
color: #6b7175;
margin-top: 0px;
}
#setupText {
font-size: 22px;
color: rgb(107, 113, 117);
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 25px;
}
#cancelAnytime {
font-size: 22px;
color: rgb(107, 113, 117);
padding-bottom: 1em;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.footer {
padding: 30px 0;
background: #eee !important;
width: 100%
}
.priceText {
font-size: 15px;
font-weight: 100;
}
.secondSection {
background-color: white;
width: 100%;
}
.extraPad {
padding-bottom: 4%;
}
.question1 {
border: 1px solid black;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
padding-top: 3%;
}
.dollarSymbol,
.mo,
.amount {
padding-bottom: 4%;
}
#extraSpace {
padding-left: 100px;
padding-right: 100px;
}
.dollarSymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
.faq {
padding-top: 20px;
padding-bottom: 20px;
}
#priceIcons {
padding-left: 20%;
}
.iconFeatures {
padding-left: 0%;
}
.iconTextPrice {
padding-left: 3%;
font-size: 14px;
font-weight: 200;
padding-top: 1%;
}
.iconUs {
left: 27%;
padding-top: 3%;
padding-bottom: 4%;
}
.textIcon {
color: black;
font-weight: 200;
}
#heroButtonPricing {
font-size: 20px;
width: 300px;
}
li {
font-size: 12px;
justify-content: left;
}
.heroBottom {
background-color: white;
}
.heroSection {
background-color: #F8FBFC;
}
.liRight {
text-align: left;
margin-left: 3em;
}
.navbar {
background-color: #F8FBFC;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.subHeroTextBottom {
font-size: 12px;
color: rgb(107, 113, 117);
padding-top: 1px;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.mainSubjectsWhy {
font-weight: 400;
font-size: 28px;
padding-top: 2em;
padding-bottom: .2em;
}
.mainSubjectsFaq {
font-weight: 400;
font-size: 28px;
padding-top: 8em;
padding-bottom: .2em;
}
.subjectHeader {
font-weight: 400;
font-weight: 100;
font-size: 18px;
padding-top: 0;
padding-bottom: .2em;
}
.readyToSignUp {
font-weight: 100;
font-size: 18px;
padding-top: 0;
margin-bottom: .1em;
}
.secondSubject {
padding-top: 15px;
}
.thirdTitle {
padding-top: 15px
}
.calButton {
padding-top: 400px;
}
.featureIconLeft1 {
left: 10%;
}
.featureTextLeft1 {
left: 6%;
}
.featureIconRight2 {
left: 5%;
}
.featureTextRight2 {
left: 1%;
}
.robpic {
width: 200px;
}
.name {
font-size: 10px;
padding-bottom: 0;
margin-bottom: 0px;
}
.title {
font-size: 8px;
padding-bottom: 2em;
}
.sectionSpace {
margin-top: 0px;
padding-top: 1.2em;
}
.backGround {
background-color: #F8FBFC;
width: 100%;
}
.tjFooterLogo {
max-width: 100px
}
#noBorder {
border: none;
width: 30%;
padding-top: 3%;
padding-bottom: 4%;
background-color: #F8FBFC;
}
.footerText {
font-size: 12px;
padding-bottom: .5em;
}
.fullWidth {
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}
.footerLogo {
width: 50%;
padding-top: 8%;
padding-bottom: 4%;
}
.footerTextCopy {
font-style: normal;
color: rgb(107, 113, 117);
font-size: 10px;
}
.name {
font-size: 18px;
font-weight: 200;
}
.title {
font-size: 14px;
font-weight: 400;
}
#media only screen and (min-width: 980px) {
.mainSubjects,
.mainSubjectsWhy {
font-size: 32px;
}
.subjectContent {
font-size: 22px;
}
}
#media only screen and (min-width: 1224px) {
.heroText {
font-size: 64px;
padding-top: 4%;
padding-left: 20%;
padding-right: 20%;
}
.subHeroText {
font-size: 20px;
word-spacing: .2em;
}
.btn-primary {
width: 150px;
}
.mainSubjects {
font-size: 40px;
font-weight: 900;
}
.subjectContent {
font-size: 20px;
}
.name {
font-size: 20px;
font-weight: 400;
}
.title {
font-size: 15px;
font-weight: 200;
}
.footerLogo {
width: 20%;
margin-top: 0;
padding-top: 2em;
padding-bottom: 10px;
}
.footerText {
font-size: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#200;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="./index.html" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
What is TextJet?
FAQ
Pricing
</div>
<div class="navbar-nav ml-auto">
Sign Up
Login
</div>
</div>
</nav>
<div class="container-flex heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h2 id="subHeroText">Now available on Clover Networks!
</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
Sign Up
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.</div>
</div>
<img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images">
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
</div>
</div>
<div class="container secondSection">
<div class="row">
<div class="col-xs-12 col-sm-6">
<a id="whatIsTextJet"></a>
<h3 class="mainSubjects">Powerful Loyalty</h3>
<p class="subjectContent">Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer">
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Marketing Autopilot</h3>
<p class="subjectContent">We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
everything will be in place for you to see results with TextJet! </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Retention Plus</h3>
<p class="subjectContent">TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30+ days. TextJet retention starts to go to work for you. Our tools help
entice Suzy to come back to your store. It's really an amazing tool for your business!
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer">
</div>
</div>
</div>
<!-- Features-->
<div class="bg-light py-5 service-5 featureSection">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-12 text-center">
<p class="mainSubjects ourFeatures">Our Features</p>
</div>
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-comment"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Rich
Messaging</a></h6>
<p class="mt-3">Send beautiful images or videos directly to your customers' cell phones.
</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="fab fa-medapps"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Retention
Plus</a></h6>
<p class="mt-3">TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. </p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-paper-plane"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Handsfree
Marketing</a></h6>
<p class="mt-3">TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-chart-bar"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Analytics &
Tracking
</a></h6>
<p class="mt-3">We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-object-group"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">2-Way
Messaging</a></h6>
<p class="mt-3">You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-gem"></i></div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">SmartPulse
(coming soon)</a></h6>
<p class="mt-3">Find out how your customers feel about your store. Resolve issues and keep your customers happy</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features-->
<!-- Pricing -->
<div class="container-flex sectionSpace bg-white">
<div class="row">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<a id="pricingSection"></a>
<h1 class="mainSubjects">Pricing</h1>
<p class="subHeroText">Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. </p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Starter Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$1 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">50 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Business Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$39 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">1000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$89 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">5000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
Started</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="mainSubjects text-center">Ready to see the TextJet difference?</h4>
<p class='subHeroText text-center'>We are here to help you grow your business!
</h2>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in 15 minutes.
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment, Cancel anytime.
</div>
</div>
</div>
</div>
</div>
<div class="container-flex footer">
<div class="row">
<div class="col-4 text-center">
<img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" />
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Pricing</div>
<div class="col-12 text-center footerText">FAQ</div>
<div class="col-12 text-center footerText">Contact Support</div>
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Privacy Policy</div>
<div class="col-12 text-center footerText">Terms of Service</div>
<div class="col-12 text-center footerText">Anti-Spam Policy</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center footerTextCopy">
© Copyright 2020 Textjet LLC
</div>
</div>
</body>
</html>

The problem is that you have Bootstrap row classes that are not inside a Bootstrap container class.
You are using the class container-flex which isn't a Bootstrap class - I assume you meant to use container-fluid (which is a Bootstrap class)? e.g.
<div class="container-flex heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
</div>
The reason this is causing a problem: is because Bootstrap container classes add 15px padding left and right, and the row class has -15px margin to remove this (i.e. it extends the row by 30px) and make the row full width. If the row is not inside a Bootstrap container class, the 30px is being added to the width and causing the scrollbar and whitespace you see.
Working Code
#import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
font-family: "Montserrat", sans-serif;
color: #636468;
font-weight: 300;
}
.service-5 h1,
.service-5 h2,
.service-5 h3,
.service-5 h4,
.service-5 h5,
.service-5 h6 {
color: #3e4555;
}
.service-5 a {
text-decoration: none;
}
.service-5 .linking {
color: #3e4555;
}
.service-5 .linking:hover {
color: #316ce8;
}
.service-5 .font-weight-medium {
font-weight: 500;
}
.service-5 .bg-light {
background-color: #f4f8fa !important;
}
.service-5 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.service-5 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-5 .wrap-service5-box .card-body {
padding: 30px;
}
.service-5 .wrap-service5-box .text-success-gradiant {
background: #f47820;
background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
background: linear-gradient(to right, #f47820 0%, #f47820 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.service-5 .wrap-service5-box .icon-size {
font-size: 45px;
}
.service-5 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
#textWhite {
color: white;
font-size: 25px;
}
.featureSection {
margin-top: 30px;
}
.ourFeatures {
margin-bottom: 50px;
}
* {
font-family: "Montserrat", sans-serif;
color: #636468;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-bottom: .3%;
}
#subHeroText {
font-size: 40px;
font-weight: 400;
color: #6b7175;
margin-top: 0px;
}
#setupText {
font-size: 22px;
color: rgb(107, 113, 117);
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 25px;
}
#cancelAnytime {
font-size: 22px;
color: rgb(107, 113, 117);
padding-bottom: 1em;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.footer {
padding: 30px 0;
background: #eee !important;
width: 100%
}
.priceText {
font-size: 15px;
font-weight: 100;
}
.secondSection {
background-color: white;
width: 100%;
}
.extraPad {
padding-bottom: 4%;
}
.question1 {
border: 1px solid black;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
padding-top: 3%;
}
.dollarSymbol,
.mo,
.amount {
padding-bottom: 4%;
}
#extraSpace {
padding-left: 100px;
padding-right: 100px;
}
.dollarSymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
.faq {
padding-top: 20px;
padding-bottom: 20px;
}
#priceIcons {
padding-left: 20%;
}
.iconFeatures {
padding-left: 0%;
}
.iconTextPrice {
padding-left: 3%;
font-size: 14px;
font-weight: 200;
padding-top: 1%;
}
.iconUs {
left: 27%;
padding-top: 3%;
padding-bottom: 4%;
}
.textIcon {
color: black;
font-weight: 200;
}
#heroButtonPricing {
font-size: 20px;
width: 300px;
}
li {
font-size: 12px;
justify-content: left;
}
.heroBottom {
background-color: white;
}
.heroSection {
background-color: #F8FBFC;
}
.liRight {
text-align: left;
margin-left: 3em;
}
.navbar {
background-color: #F8FBFC;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.subHeroTextBottom {
font-size: 12px;
color: rgb(107, 113, 117);
padding-top: 1px;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.mainSubjectsWhy {
font-weight: 400;
font-size: 28px;
padding-top: 2em;
padding-bottom: .2em;
}
.mainSubjectsFaq {
font-weight: 400;
font-size: 28px;
padding-top: 8em;
padding-bottom: .2em;
}
.subjectHeader {
font-weight: 400;
font-weight: 100;
font-size: 18px;
padding-top: 0;
padding-bottom: .2em;
}
.readyToSignUp {
font-weight: 100;
font-size: 18px;
padding-top: 0;
margin-bottom: .1em;
}
.secondSubject {
padding-top: 15px;
}
.thirdTitle {
padding-top: 15px
}
.calButton {
padding-top: 400px;
}
.featureIconLeft1 {
left: 10%;
}
.featureTextLeft1 {
left: 6%;
}
.featureIconRight2 {
left: 5%;
}
.featureTextRight2 {
left: 1%;
}
.robpic {
width: 200px;
}
.name {
font-size: 10px;
padding-bottom: 0;
margin-bottom: 0px;
}
.title {
font-size: 8px;
padding-bottom: 2em;
}
.sectionSpace {
margin-top: 0px;
padding-top: 1.2em;
}
.backGround {
background-color: #F8FBFC;
width: 100%;
}
.tjFooterLogo {
max-width: 100px
}
#noBorder {
border: none;
width: 30%;
padding-top: 3%;
padding-bottom: 4%;
background-color: #F8FBFC;
}
.footerText {
font-size: 12px;
padding-bottom: .5em;
}
.fullWidth {
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}
.footerLogo {
width: 50%;
padding-top: 8%;
padding-bottom: 4%;
}
.footerTextCopy {
font-style: normal;
color: rgb(107, 113, 117);
font-size: 10px;
}
.name {
font-size: 18px;
font-weight: 200;
}
.title {
font-size: 14px;
font-weight: 400;
}
#media only screen and (min-width: 980px) {
.mainSubjects,
.mainSubjectsWhy {
font-size: 32px;
}
.subjectContent {
font-size: 22px;
}
}
#media only screen and (min-width: 1224px) {
.heroText {
font-size: 64px;
padding-top: 4%;
padding-left: 20%;
padding-right: 20%;
}
.subHeroText {
font-size: 20px;
word-spacing: .2em;
}
.btn-primary {
width: 150px;
}
.mainSubjects {
font-size: 40px;
font-weight: 900;
}
.subjectContent {
font-size: 20px;
}
.name {
font-size: 20px;
font-weight: 400;
}
.title {
font-size: 15px;
font-weight: 200;
}
.footerLogo {
width: 20%;
margin-top: 0;
padding-top: 2em;
padding-bottom: 10px;
}
.footerText {
font-size: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#200;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="./index.html" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
What is TextJet?
FAQ
Pricing
</div>
<div class="navbar-nav ml-auto">
Sign Up
Login
</div>
</div>
</nav>
<div class="container-fluid heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h2 id="subHeroText">Now available on Clover Networks!
</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
Sign Up
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.</div>
</div>
<img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images">
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
</div>
</div>
<div class="container secondSection">
<div class="row">
<div class="col-xs-12 col-sm-6">
<a id="whatIsTextJet"></a>
<h3 class="mainSubjects">Powerful Loyalty</h3>
<p class="subjectContent">Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer">
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Marketing Autopilot</h3>
<p class="subjectContent">We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
everything will be in place for you to see results with TextJet! </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Retention Plus</h3>
<p class="subjectContent">TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30+ days. TextJet retention starts to go to work for you. Our tools help
entice Suzy to come back to your store. It's really an amazing tool for your business!
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer">
</div>
</div>
</div>
<!-- Features-->
<div class="bg-light py-5 service-5 featureSection">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-12 text-center">
<p class="mainSubjects ourFeatures">Our Features</p>
</div>
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-comment"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Rich
Messaging</a></h6>
<p class="mt-3">Send beautiful images or videos directly to your customers' cell phones.
</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="fab fa-medapps"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Retention
Plus</a></h6>
<p class="mt-3">TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. </p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-paper-plane"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Handsfree
Marketing</a></h6>
<p class="mt-3">TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-chart-bar"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Analytics &
Tracking
</a></h6>
<p class="mt-3">We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-object-group"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">2-Way
Messaging</a></h6>
<p class="mt-3">You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-gem"></i></div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">SmartPulse
(coming soon)</a></h6>
<p class="mt-3">Find out how your customers feel about your store. Resolve issues and keep your customers happy</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features-->
<!-- Pricing -->
<div class="container-fluid sectionSpace bg-white">
<div class="row">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<a id="pricingSection"></a>
<h1 class="mainSubjects">Pricing</h1>
<p class="subHeroText">Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. </p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Starter Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$1 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">50 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Business Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$39 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">1000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$89 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">5000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
Started</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="mainSubjects text-center">Ready to see the TextJet difference?</h4>
<p class='subHeroText text-center'>We are here to help you grow your business!
</h2>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in 15 minutes.
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment, Cancel anytime.
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer">
<div class="row">
<div class="col-4 text-center">
<img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" />
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Pricing</div>
<div class="col-12 text-center footerText">FAQ</div>
<div class="col-12 text-center footerText">Contact Support</div>
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Privacy Policy</div>
<div class="col-12 text-center footerText">Terms of Service</div>
<div class="col-12 text-center footerText">Anti-Spam Policy</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center footerTextCopy">
© Copyright 2020 Textjet LLC
</div>
</div>
</body>
</html>

Navigation-bar changes it's width after sticking to the top

The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>

Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>

'Text-decoration: none !important' not working with bootstrap

Here is my codepen: https://codepen.io/LastSoldi3r/pen/OmjGgR
HTML:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
I understand that you can change the css within bootstrap itself to change these effects. However, I am learning and seeing as I am new I just used the link provided on the bootstrap website instead of sifting through the css. If you look at my pen you will see that hovering over any text well darken it and underline some parts.
I have tried overriding the code in various ways.
My most recently tried, and most commonly found solution:
a.hover {text-decoration: none !important;}
This has not worked for me and I haven't been able to find any other working solution.

add this simple code to your css file :
html a:hover {
text-decoration: none !important;
}
here is how your page will shown :
html a:hover {
text-decoration: none !important;
}
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>

You were super close!
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
text-decoration: none;
}
Here is a forked example of what you are looking for:
https://codepen.io/anon/pen/NjaobY

I just added text-decoration: none to your existing CSS. https://codepen.io/anon/pen/Lyzqxp

Replace a.hover with a:hover and it should work.
.hover means "class named hover"
:hover means "when the element is hovered"
If you're using Chrome, the Developper Tools (right click -> inspect element) -or similar firebug features- will allow you to see what css is being rendered on any element.

you should override bootstrap style by "!important" please use this:
https://codepen.io/houtan/pen/mmBvop

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Facing problem in setting margins in bootsrap cards - html

Related

text-break, word-break, all breaks do not work anymore for no apparent reason

Make these columns equal height

Bootstrap 4 full-width padding issue is causing a scrollbar and white space

Navigation-bar changes it's width after sticking to the top

'Text-decoration: none !important' not working with bootstrap

Categories

Resources