Elements of the jumbotron is not properly aligned - html

Question

Good day! I'm having a struggle to aligned the jumbtron to my calendar icon. And the elements of the jumbtron is not inside of it. Can someone help me how to solve this? Ideas? i just started studying bootstrap and css.
Here's the picture.
here is my html code.
<div class="events">
<div class="container">
<div class="row">
<div class= "col-sm-4 col-xs-25">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<div class="container">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class= "col-sm-8 col-xs-25">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
</div>
</div>
</div>
</div>
here is my css
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
.jumbotron {
width: 300px;
height: 100px;
margin:none;
}
.jumbotron p {
font-size:12px;
}

Answer 1

The .container class carries its own width(s) and is intended to be used as a outer wrapper for your layout. Because of this, they do not tend to nest well. The one you have as a sibling of your .date classed elements is breaking the layout.
As for the spacing of the .jumbotron contents, Bootstrap assigns some pretty dramatic padding to that class by default. Consider overwriting that with your own values in your .jumbotron rule. The other issue — the .jumbotron contents bleeding out of their container — that is a result of the height: 100px you are setting. You can stop the contents from taking up space beyond the boundaries of the .jumbotron by adding/modifying its overflow property. This may be a matter of opinion but I think it is usually better to avoid setting height in the CSS and let the contents define the size of the container — especially in cases where the content is CMS/client driven.
If you remove the .container, you’ll still have the problem of the .date and .jumbotron stacking vertically. To address that, you might consider treating Date element as .row with a column for your .date element, and a column for that Date’s event(s).
<hr class="carved">
<div class=“row”><!-- the Date wrapper -->
<div class="col-sm-4">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class="col-sm-8"><!-- this column holds all the Events for this Date -->
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
</div>
Note: The new structure will require a bit of adjustment to some of your CSS width properties, and the col- device/sizes I put on the Date and Event columns are just examples — size as needed.

Answer 2

<div class="container">
<div class="row">
<div class="col-md-2">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div><!-- date -->
</div><!-- md2 -->
<div class="col-md-10">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div><!-- jumbo -->
</div><!-- md10 -->
</div><!-row>
</div><!-- container -->
+
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
Result