Why the "[email protected]" goes to the next line? Even though i only display:block the span?

Question

HTML

<div class="contact_info">
  <ul>
  <li><h2>Call Us: </h2><span><a href="tel:12345678"><mark>1-234-5678</mark></a></span></li>
  <li><h2>Email: </h2><a href="mailto:[email protected]">[email protected]</a><span>Business Email: <a  href="mailto:[email protected]">mailto:[email protected]</a></span></li>
<li><h2>Visit Us: </h2><span><address>123 Maple Avenue, Suite Alpha, California 12345</address></span></li>
</ul>
</div>

CSS

.contact_info {margin: 45px 0 0;}
    .contact_info ul {display: flex;justify-content: space-between;}
    .contact_info ul li {text-align: left; font-size: 17px;}
    .contact_info ul li span{display: block;}
    .contact_info ul li a {color: #333;display: inline;}
    .contact_info ul li a:hover {text-decoration: underline;}
    .contact_info ul li:first-child h2 {font-size: 20px; font-weight: 500;}
    .contact_info ul li:last-child h2 {font-size: 20px;}

Why the [email protected] goes to another line? Even though i only display:block the span?