A bug with a link in a block that is the link itself. How to fix it?

Question

HTML

There is a div event_description block which is located in the link, there is a text with a link in it, and such a bug occurs
because the link div itself

<div class="item_wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
          <a data-toggle="modal" href="/local/ajax/ajax_events.php?events_id=<?=$arItem['ID']?>" data-href="<?='/events/'.$arItem['CODE'].'/'?>" data-id="<?=$arItem['ID']?>">
            <div class="event_item">
              <div class="event_item_img col-lg-4 col-md-4 col-sm-4 col-xs-6"><img src="<?=$arItem['PREVIEW_PICTURE']['SRC']?>" alt=""></div>
              <div class="event_item_text  col-lg-7 col-md-7 col-sm-7 col-xs-6 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 ">
                <div class="event_date"><?eng_date($arItem['DISPLAY_ACTIVE_FROM'])?></div>
                <div class="event_title"><?=$arItem['NAME']?></div>
                <div class="event_description"><?=$arItem['PREVIEW_TEXT']?></div>
                <div role="separator" class="divider"></div>
                <div class="event_detail_btn">LEARN MORE</div>
              </div>
            </div>
          </a>
        </div>

how to make a normal link?