title: Elements of the jumbotron is not properly aligned
body: <p>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.</p>
  
  <p>Here's the picture.</p>
  
  <p><a href="https://i.stack.imgur.com/Inz3W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Inz3W.png" alt="enter image description here"></a></p>
  
  <p>here is my html code.</p>
  
  <pre><code> &lt;div class="events"&gt;
     &lt;div class="container"&gt;
       &lt;div class="row"&gt;
         &lt;div class= "col-sm-4 col-xs-25"&gt;
           &lt;h4 id="event"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt; Upcoming Events&lt;/h4&gt;
           &lt;hr class="carved"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
           &lt;div class="container"&gt;
             &lt;div class="jumbotron"&gt;
               &lt;h4&gt;Sample Title&lt;/h4&gt;
               &lt;p&gt;IT Thesis defense&lt;/p&gt;
               &lt;h6&gt;7:00 AM - 8:00 PM&lt;/h6&gt;
             &lt;/div&gt;
           &lt;/div&gt;
           &lt;hr class="divider"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
           &lt;hr class="divider"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class= "col-sm-8 col-xs-25"&gt;
           &lt;h4 id="event"&gt;&lt;i class="fa fa-newspaper-o" aria-hidden="true"&gt;&lt;/i&gt; Latest News&lt;/h4&gt;
           &lt;hr class="carved"&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>here is my css </p>
  
  <pre><code>#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;
  }
  </code></pre>