Scrolling marquee banner

I need to make a dynamic running banner in one line, it works but it spans two lines. I can't figure out why it spans 2 lines. Please help.

$(document).ready(async function() {
  GetBannerMessages();
});

async function GetBannerMessages() {
  $.ajax({
    url: '/Banner/Banner',
    type: 'POST',
    data: {

    },
    datatype: "html",
    success: function(res) {
      console.log(res);
      var holder = $('#bannerHolder');
      for (var i = 0; i < res.length; i++) {
        var row = "<div class='text-container' >&nbsp; &nbsp; <a data-fancybox-group='gallery' class='fancybox' href='#' title='" + res[i].Msg_Text + "'>" + res[i].Msg_Text + "</a></div>" +
          "<div class='text-container'>&nbsp; &nbsp; <a data-fancybox-group='gallery' class='fancybox' href='#'> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;</a></div>";
        holder.append(row);
      }

    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="runtext-container  col-12" style="margin-top: 5%;">
  <div class="main-runtext">
    <marquee direction="right" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
      <div class="holder" id="bannerHolder"></div>
    </marquee>
  </div>
</div>

Scrolling marquee banner

0 Answers