Html css浮动左两个元素

我希望span标记浮动在左侧，并且

也浮动在其旁边。但是

位于跨度之下

我可以想象它与设置元素的宽度有关，但我希望它具有响应性和灵活性

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3 class="highlight-sub"><em>Start using your card today</em></h3>
        </div>
        <div class="col-md-8">
            <div class="col-md-4">
               <span class="step">1</span>
               <section>
                    <h4 class="highlight-prim">Complete Form</h4>
                    <p class="highlight-sub">Simply fill in our online form and your account will created.</p>
               </section>
            </div>
            <div class="col-md-4">
                <span class="step">2</span>
                <section>
                    <h4 class="highlight-prim">Receive by Post</h4>
                    <p class="highlight-sub">You will be sent your new card in post.</p>
                </section>              
            </div>
            <div class="col-md-4">
                <span class="step">3</span>
                <section>
                    <h4 class="highlight-prim">Start Enjoying</h4>
                    <p class="highlight-sub">Present your new card to any of our partners for al the benifits.</p>
                </section>      
            </div>
         </div>
      </div>
  </div>

#mid-content span.step {
  border: 2px solid #A99269;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #A99269;
  display: inline-block;
  font-weight: 300;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
  font-size: 32px;
  float: left
}

#mid-content section {
    display: inline-block;
    float:left
}

从今天开始使用你的卡
1.
完整形式
只需填写我们的在线表格，即可创建您的帐户
2.
邮寄
您将收到邮寄的新卡
3.
开始享受
为了所有利益，将您的新卡赠送给我们的任何合作伙伴
#中间内容span.step{
边框：2个实心#A99269；
边界半径：0.8em；
-moz边界半径：0.8em；
-webkit边界半径：0.8em；
颜色：#A99269；
显示：内联块；
字体大小：300；
线高：1.6em；
右边距：5px；
文本对齐：居中；
宽度：1.6em；
字体大小：32px；
浮动：左
}
#中间内容部分{
显示：内联块；
浮动：左
}

是的，可能

部分的内容几乎是该行的100%，它会转到第二行。您可以将span放置在部分内，仅将
.step
元素向左浮动，并为
部分提供等于
.step
的总宽度的左边距（我指的是包括边框的总边距…）

演示在

（使用任意边距，因为我不知道计算边距的当前样式。）
如果我将跨距放在部分内，我会将标题和段落标记缠绕在其周围。感谢您的帮助，我真的不知道如何设置边距。我试过其他的方法。