Styling random post on show page

rails

#1

I’m making a recipe website and on the show page there is a random recipe, but the recipe’s title, the user who created it, the comments, and the thumbs up are not showing because the box is not wide enough.
show.html.haml page

#random_post
	%h3 Check this out
		.post	
			.post_image 
				= link_to (image_tag @random_post.image.url(:small)), post_path(@random_post)
				.post_content
					.title
						%h2= link_to @random_post.title, post_path(@random_post)
						.data.clearfix
							%p.username
								Share by
								= @random_post.user.name
							%p.buttons
								%span
									%i.fa.fa-comments-o
									= @random_post.comments.count
								%span
									%i.fa.fa-thumbs-o-up
									= @random_post.get_likes.size

And the css part of it:

#random_post {
		width: 25%;
		margin-left: 5%;
		margin-top: -3.2rem;
		float: left;
		h3 {
			font-size: 1rem;
		}
		.post {
			background: #F8F9FA;
			border: 1px solid #E4E4E4;
			border-radius: 0.3rem;
			.post_image {
				height: 200px;
				overflow: hidden;
				img {
					width: 100%;
					border-radius: .3rem .3rem 0 0;
				}
			}
			.post_content {
				h2 {
					margin: 0;
					font-weight: 100;
					padding: 1rem 5%;
					border-bottom: 1px solid #E4E4E4;
					font-size: 1.25rem;
					a {
						text-decoration: none;
						color: #333233;
						&:hover {
							color: #50A7C7;
						}
					}
				}
				.data {
					padding: .75rem 5%;
					color: #969696;
					.username, .buttons {
						margin: 0;
						font-size: .8rem;
					}
					.username {
						float: left;
					}
					.buttons {
						float: right;
						span {
							margin-left: .5rem;
						}
					}
				}
			}
		}
	}

I tried adding the height to be about 25% but still doesn’t work. If I delete all the CSS the stuff does show.