Цифровые карты вместо вертикальных, если горизонтальные

Question

Я пытаюсь заставить карты ниже показываться горизонтально, но они продолжают показываться вертикально.Я понятия не имею, как это изменить.Я пробовал несколько разных вещей, но либо содержимое внутри карты перемещается, либо просто ничего не происходит.И это не из-за размера окна.

Они выглядят намного лучше (https://codepen.io/defaydesigns/pen/dKNxGj), но в оригинале было слишком много кода, который мне пришлось упростить.)

.blog, button {
  font-family: Rockwell;
}
.blogCard {
	max-width: 300px;
	height: 250px;
	border: 2px solid #a81e36;
	border-radius: 20px;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 10px;
	box-shadow: 0px 0px 10px #a81e36;
	-moz-box-shadow: 0px 0px 10px #a81e36;
	-webkit-box-shadow: 0px 0px 10px #a81e36;
	margin: 5%;
}

  <div class="blog">
		  <div class="blogCard">
    <div class="blogTitle">
		  <h1>RANT 1</h1>
		  </div>
		  <div class="blogSummary">
		  Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
		  </div>
		  
		 <center><button class="blogButton">
			 READ MORE &rarr;
		  </button></center>
	  </div>
		  <div class="blogCard">
    <div class="blogTitle">
		  <h1>RANT 1</h1>
		  </div>
		  <div class="blogSummary">
		  Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
		  </div>
		  
		 <center><button class="blogButton">
			 READ MORE &rarr;
		  </button></center>
	  </div>
		  </div>

Answer 1

Вы можете использовать свойство display в css

.blogCard{
  display: inline-flex;
}