Kaw123 Kaw123 - 1 year ago 65
HTML Question

Right Column not perfectly aligned

I'm creating a lms for a project,

But the problem is the Calendar is not properly horizonatly aligned. It's kind of aligned middle of the screen. I want it to push right corner but it is not happening at the moment.

I'm using Bootstrap.

Here's CODEPEN link

$(function() {

offset: { top: $('#nav').offset().top }

#nav.affix {
position: fixed;
top: 0;
width: 100%

#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;



.nav-sidebar {
width: 100%;
padding: 0px 0;
/* border: 1px solid #ddd; */
.nav-sidebar a {
color: #333;
-webkit-transition: all 0.08s linear;
-moz-transition: all 0.08s linear;
-o-transition: all 0.08s linear;
transition: all 0.08s linear;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
.nav-sidebar .active a {
cursor: default;
background-color: #428bca;
color: #fff;
text-shadow: 1px 1px 1px #666;
.nav-sidebar .active a:hover {
background-color: #428bca;
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

/* Right-aligned sidebar */
.nav-sidebar.pull-right {
border-right: 0;
border-left: 1px solid #ddd;
.nav-sidebar.pull-right a {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;


max-width: 800px;
margin-top: -30px;
margin-right: 150px;
text-transform: capitalize;


.navbar > .container {width:auto;}

* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

.month {
padding: 70px 25px;
width: 100%;
background: #428bca;

.month ul {
margin: 0;
padding: 0;

.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;

.month .prev {
float: left;
padding-top: 10px;

.month .next {
float: right;
padding-top: 10px;

.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;

.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;

.days {
padding: 10px 0;
background: #eee;
margin: 0;

.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
color: #777;

.days li .active {
padding: 5px;
background: #428bca;
color: white !important

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}

@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}

@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}

<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css"></script>

<nav class="navbar navbar-fixed-top navbar-default" role="navigation" container="false">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a href="#" class="navbar-brand">
<img src="aaa.gif" class="img-responsive" alt="Cinque Terre" width="70" height="35">
</div><div class="collapse navbar-collapse" id="navbar-collapsable">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Logged in as Some Person</p>
<a href="/log_out">
Log out


<div class="center_row">
<div class="row ">
<div class="col-md-8">
<div class="right_side">

<div class="col-md-4">
<div class="left_side" style="margin-left:100px;margin-right:-500px;">
<h3 id="demo" class="text-right" style="text-transform: uppercase; "></h3>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();



<div class="row">
<div class="col-md-4">

<div class="container">

<div class="row">
<div class="col-md-2">
<nav class="nav-sidebar">
<ul class="nav">
<li class="active"><a href="javascript:;"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</a></li>
<li><a href="javascript:;">AAA Quaterly News</a></li>
<li><a href="javascript:;">Student Handbooks</a></li>
<li><a href="javascript:;">Award Handbooks</a></li>
<li><a href="javascript:;">Regulations</a></li>
<li><a href="javascript:;">Examination Time Tables</a></li>
<li><a href="javascript:;">Class Time Tables</a></li>
<li><a href="javascript:;">Contact Us</a></li>
<li class="nav-divider"></li>
<li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>

<div class="col-md-8" >
<h3 style="color: #428bca;">LATEST NEWS</h3>

<div class="col-md-2" id="pull-right" style="float:right !important;">

<div class="month">
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
<span style="font-size:18px">2016</span>

<ul class="weekdays">

<ul class="days">
<li><span class="active">10</span></li>






What i want is as follows,

enter image description here

Answer Source

As per my view you should change the column grid as you are using col-md-4 but as you said you need it then go with col-md-12 and container-fluid to get the desired result.

container always have fixed width in different different resolution(in px) but if you want full width then try to use container-fluid which will take 100% according to all screen.

Check my codepan. I have removed row as it was taking extra margin and i have applied container-fluid to get the desired output. hope it will help.

NOTE In .navbar-brand class you are using fix height(50px) by which your logo image is going out. Either increase the size of nav bar or remove that height so logo will be in nav bar. Thank you