Width of jquery news ticker - webflow

I used this code to create a news ticker in webflow

[original code][https://discourse.webflow.com/t/automated-scrolling-news-bar/29033/5]

Works great, but I need to make it full browser width. Nothing I do seems to make that happen, even setting everything to 100%. Any ideas?

I tried setting everything to 100%, not sure where this fixed width is coming from.

My code below...

jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
    travelocity: 0.07
  }, settings);
  return this.each(function() {
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i) {
      stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width    
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
    function scrollnews(spazio, tempo) {
      $strip.animate({
        left: '-=' + spazio
      }, tempo, "linear", function() {
        $strip.css("left", containerWidth);
        scrollnews(totalTravel, defTiming);
      });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(function() {
        jQuery(this).stop();
      },
      function() {
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
      });
  });
};

$(function() {
  $("ul#demo").liScroll();

});

.tickercontainer {
  border: 0px solid #000;
  background: #f5d82b;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tickercontainer .mask {
  position: relative;
  left: 10px;
  top: 0px;
  width: 100%;
  overflow: hidden;
}

ul.newsticker {
  position: relative;
  left: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.newsticker li {
  float: left;
  margin: 0;
  padding: 0;
  background: #f5d82b;
}

ul.newsticker a {
  white-space: nowrap;
  padding: 0;
  color: #ff0000;
  margin: 0 0px 0 0;
}

ul.newsticker span {
  margin: 0 0px 0 0;
}

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="body">
  <div class="news-ticker wf-section">
    <div class="news-ticker-container w-container">
      <div class="tickercontainer">
        <div class="mask">
          <ul id="demo" role="list" class="list newsticker" style="width: 753.516px; left: 670.826px;">
            <li>Finding the right artist for your creative endeavour has never been so easy - all on one page.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Solution

It turned out the custom code and css was all fine, but webflow put an extra container around everything with display: flex; , I switched this to display: block; and it worked.