Centering text in bootstrap - html

Question

I want to create a website as a portfolio for my other work. However I'm having a lot of trouble with centering text within my links. I've tried multiple methods to no avail.
The text I'm trying to alter is the text in the navigation section "about me" "portfolio" "skills" "contact" The text is within a row-->column-->link
I've attempted applying the text-center class in multiple different positions throughout the code and I've also tried applying it within my CSS using the text-align function. There isn't too much code so I imagine that someone with a bit of HTML experience will solve this in no time.
#mainContainer{
z-index:0;position:fixed;
width:100%; height:100%;
background-color: white;
}
.headerClass{
margin-top:auto;
margin-bottom:auto;
}
#headText{
color:white;
font-size: 1.5vw;
font-family: fantasy;
vertical-align: middle;
}
#infoBox{
height:100%;
width:100%;
}
#infoBoxCol{
background-repeat: no-repeat;
background-size:cover;
}
.navbar{
border-style: solid;
border-color: white;
width: 100%;
color:white;
font-family:fantasy;
font-size: 1.1vw;
text-align:center;
}
.navRoof{
text-align:center;
width:100%;
height:10%;
background-color:white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid text-center" id="mainContainer">
<div class="row" style="background-color: black; height:30%;">
<div class="col-4 my-auto text-fluid" class="headerClass" id="headText">
Software Developer
</div>
<div class="col-1"></div>
<div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
<div class="col-1"></div>
<div class="col-4 my-auto">
<div class="row" id="navigation">
<div class="col-3">About Me</div>
<div class="col-3">Portfolio</div>
<div class="col-3">Skills</div>
<div class="col-3">Contact</div>
</div>
</div>
</div>
</div>

Answer 1

Here i using bootstrap flex instead of row > col-* to have a more flexible design, one thing that you are doing wrong is u are overwriting the bootstrap class "navbar" it have his properties more your news properties this make your design problems. Also is bad idea use vw as unit for font-size if u want get responsive design.
#mainContainer{
z-index:0;position:fixed;
width:100%; height:100%;
background-color: white;
}
.headerClass{
margin-top:auto;
margin-bottom:auto;
}
#headText{
color:white;
font-size: 1.5vw;
font-family: fantasy;
vertical-align: middle;
}
#infoBox{
height:100%;
width:100%;
}
#infoBoxCol{
background-repeat: no-repeat;
background-size:cover;
}
.navRoof{
text-align:center;
width:100%;
height:10%;
background-color:white;
}
.custom-navbar-container {
border-style: solid;
border-color: white;
}
.custom-link {
white-space: nowrap;
color:white;
font-family:fantasy;
font-size: 1.1vw;
padding: .25rem;
display: block;
}
.custom-link:hover {
text-decoration: none;
color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid text-center" id="mainContainer">
<div class="row" style="background-color: black; height:30%;">
<div class="col-4 my-auto text-fluid" class="headerClass" id="headText">
Software Developer
</div>
<div class="col-1"></div>
<div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
<div class="col-1"></div>
<div class="col-4 my-auto">
<div class="d-flex" id="navigation">
<div class="p-1">
<div class="custom-navbar-container">
About Me
</div>
</div>
<div class="p-1">
<div class="custom-navbar-container">
Portfolio
</div>
</div>
<div class="p-1">
<div class="custom-navbar-container">
Skills
</div>
</div>
<div class="p-1">
<div class="custom-navbar-container">
Contact
</div>
</div>
</div>
</div>
</div>
</div>