HTML电子邮件模板在Outlook和Yahoo中看不正常

Question

我在HTML页面的左右两侧创建了两个圆圈。两圈之间加了一根烟斗。

我编写了一个API，并在下面添加了HTML设计和CSS来发送电子邮件。

当我在电子邮件正文中发送HTML并发送电子邮件时。在Gmail中，该页面看起来不错，但在Outlook和Yahoo电子邮箱上看起来不太合适。

HTML： -

    <div>
      <div class="step1-step2-circle">
        <div class="step1-outer">
          <div class="step1"> <span class="digit">1 </span></div>
          </div>
        <div class="pipe"></div>
        <div class="step2-outer">
          <div class="step2"> <span class="digit">2 </span>   </div>
        </div>
      </div>
   </div>

CSS： -

  .step1-step2-circle{
    display:flex; position:         relative; height: 70px;          
    display: -ms-flexbox;           display: -webkit-flex;
  }
 .step1-outer{
    width: 70px; 
    height: 70px;
    float: left; 
    display: flex; 
    border-radius: 50%;
    position: absolute; 
    left: 0;
    top: 0; 
    bottom: 0; 
    right: 0;
    margin: auto 0; 
    z-index: 9;          background:green;
  }

 .step1{
    background:#headerBackground; width: 43px;
    height: 45px;
    float: left;
    border-radius: 50%; 
    z-index: 999;
    border: 1px solid white;  position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px; margin: auto;
  }

 .digit{
   color: #fff;  font-size: 28px;  display:flex;  align-items:center;  
   justify-content:center;  margin: 15%;  font-weight: 800;  display: 
   -ms-flexbox;  -webkit-box-align: center;  -ms-flex-align: center;  
   -webkit-box-pack: center;  -ms-flex-pack: center;  display: -
   webkit-flex;  display: flex;  -webkit-flex-direction: row;  flex-
   direction: row;  -webkit-align-items: center;
  }
 .pipe{
   width: calc(100% - 140px);     height: 5px;  
   background: #818a91;            margin: 0px 0px;  
   position: absolute; 
   left: 0;   
   right: 0;  
   top: 0;  
   bottom: 0;  
   margin: auto;
 }
.step2-outer{
  width: 70px;    height: 70px;  display: flex;  background: #818a91;    
  float: right;    border-radius: 50%;    position: absolute;    
   right: 0;    top: 0;    bottom: 0;    margin: auto;
 }

.step2{
  float: left;  width:45px;  height:45px;  background: #818a91;  
  border-radius:50%;  z-index:999;  border: 1px solid white; position: 
  absolute; top:0px; right: 0px; bottom: 0px ;left: 0px ;margin: auto
 }