How to center elements when you have a navbar on the side? - html

Question

For my school project I am allowed to choose a topic that is based on work we've been doing for the past two years. I chose web development. I'm creating site that simply collates various resources relevant to the subject matter, and that's easy.
The only issue I'm running into is centering elements when there is a navbar on the side.
For example, I'm trying to include this image of 'Brackets' on the homepage, but when I want to center it, it centers relative to screen and not relative to the container.
(The arrows point to where I'm trying to center things from)
Link to jsfiddle
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none;
/* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
.sidebarheader {
height: 35px;
border-radius: 1px;
border-bottom: 2px solid #9d9d9d;
}
.sidebaritem {
height: 35px;
}
body {
background-color: #fcfcfc;
}
.jumbotron {
margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="index"><i class="fa fa-code" aria-hidden="true"></i></a>
<ul class="nav navbar-nav">
<!-- HTML Section-->
<li class="sidebarheader">HTML
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Bootstrap
</li>
<li>Icons
</li>
<!-- CSS Section-->
<li class="sidebarheader">CSS
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Specificity
</li>
<li class="sidebaritem">Selectors
</li>
<li class="sidebaritem">Fonts
</li>
<!-- Javascript Section-->
<li class="sidebarheader">Javascript
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Plugins
</li>
</ul>
</div>
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
</div>
<img class="center-block" src="http://brackets.io/img/hero.png">

Answer 1

Otherwise you made a simple mistake, you did not include img tag to container. It is outside container element.
Here is the corrected code. I've noticed you have included margin in image itself. You don't need that margin.
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
<div class="page-content">
<img class="responsive" src="http://brackets.io/img/hero.png">
</div>
</div>
EDIT: I've made some other adjustments to your code. I am not sure if you want that, but it works better. I've also added responsive image, that fits container every time.
img.responsive {
width:100%;
height:auto;
}