Question posted in 
I have an HTML page created with HTML, Javascript and CSS. There is a left vertical nav-bar on the page but I can’t display content (text) in the center of the page (see screenshot – can’t get text to be displayed where the red oval is). 
I’ve tried writing in between every single <div> tag on the page and at the beginning and end of the <body> section but to no avail, the content will not go there.
/* Custom styles */
.navbar {
height: 100vh;
/* Make navbar take full height of the viewport */
width: 250px;
/* Set a fixed width for the navbar */
}
.navbar-nav {
flex-direction: column;
/* Stack items vertically */
}
.nav-item {
width: 100%;
/* Make nav items take full width of the navbar */
}
.nav-link {
border: 1px solid black;
/* Add border to the nav items */
background-color: white;
/* Set background color for the nav items */
color: black;
/* Set text color for the nav items */
padding: 10px;
/* Add padding inside the nav items */
margin: 5px 0;
/* Add some space between the nav items */
border-radius: 0;
/* Remove border radius to match the screenshot */
}
/* Adjust the active link style */
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
background-color: #e9ecef;
/* Change background color for active/hover/focus */
color: black;
/* Text color for active/hover/focus */
}
/* Remove default Bootstrap styles for active nav-link */
.nav-link.active {
border-color: #e9ecef;
background-color: #e9ecef;
}<!-- Include Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<span class="fs-4">Peeps</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Home
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Org Chart
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
OKRs
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Performance
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Onboarding
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
Learning & Development
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<strong>More</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
<div class="container mt-3">
<div class="row">
<div class="col-12 mb-3">
<div class="p-3 box">
<h2>Welcome to Peeps!</h2>
</div>
</div>
<div class="col-md-6">
<div class="p-3 box">
<p>Recommendations on how to get started go here.</p>
</div>
</div>
<div class="col-md-6">
<div class="p-3 box">
<p>Some relevant graphs will go here. This will likely be around employee data, and would be customizable. --></p>
</div>
</div>
</div>
</div>
<!-- Include Bootstrap JS and its dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
2
Answers
Not sure exactly what you want to put where but to make the container content go to where your oval is just add to the body a flex and it should be good
If you are new to CSS the I would suggest then understand the concepts of CSS but for making projects use Tailwind CSS but before you start learning Tailwind get some basic knowledge on what is NodeJS as for using tailwind css in your local machine you will need to install tailwind css and that is where the basic knowledge of NodeJS will come in handy to you.