Apply formatting to a result of a query in PHP [Resolved]

I have two main files, I copied the content from a previous site (because I do not have much knowledge in PHP).

I have a main php called "localizatusucursal.php" which is the front-end page of a BD search.

You choose a state, then a city and the list of branches is displayed. In addition, it appears: "See Map" and when clicking, the corresponding map appears in Google Maps, within a div.

So far, all right, the problem is that this list appears to me in the following way:

Which is not a good option, since the user can not distinguish between each branch, because everything is stacked, ideally it looks like this:

But despite adding the styles, I can not make them change.

PHP has part of the code as in comments:

 <div id="sucursales" class="sucursales col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding: 2%">
    <br /><br />
              Seleccione un estado y una ciudad.
             <ul >

           <li>          
              <span><b>1. Av. México </b></span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
               <br /></li>
              <li>          
              <span>1. Av. México </span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b>Ver Mapa</b>
              <br /></li>
           <li>          
              <span>1. Av. México </span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
              <br /></li>




            </ul>


     <script type="text/javascript" src="js/libs/simplyscroll/re_.js"></script>
    <script type="text/javascript" src="js/libs/simplyscroll/common.js"></script>
    <script type="text/javascript" src="js/libs/simplyscroll/jquery.simplyscroll.js"></script>
    <link rel="stylesheet" href="js/libs/simplyscroll/jquery.simplyscroll.css" media="all" type="text/css">


     -->

I've added styles within the same php but they do not apply to that div: / What should be changed (the addresses of the branches) are in the file that makes the query of the states and the branches called "p_citys.php", but I do not know if I can add styles so that I stay as what I want, because I already tried it and it shows syntax errors.

 $res .= "<ul id='sucs'>";
      foreach( $regs as $r){ 
         $cont++;
         $res .= "<li> 
                    <span> <b> ".$cont.". $r->denominacion ($r->clave) <b></span><br /> 
                    $r->vialidad #$r->no_ext, Col. $r->colonia, C.P. $r->cp, 
                    $r->localidad $r->estado.<br />
                    $r->tel  &nbsp; <b><a href=\"javascript:NajaxJq('p_citys','loadMap&lt=$r->latitud&lg=$r->longitud','showMap');\"  >Ver Mapa</a></b>
                    <br /></li>"; 
       }