HTML MARQUEE not works as expected : <p>I am using MARQUEE tag to scroll three sentences. </p>

<p>The first 2 sentence scrolls correctly, whereas the last one is in completing the scrolling in the middle of the div (when I use full screen 100%).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>marquee span { 
	margin-right: 23%; 
	} 
	marquee p { 
	white-space:nowrap;
	margin-right: 100px; 
	} </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style='color: #fff;position: fixed;bottom: -10px;padding: 8px 0px;width: 100%;background:#090270;z-index:100;'&gt;

&lt;div  style='float: left;width: 90%;padding: 3px 8px 0px 8px;margin-top:-5px;'&gt;

&lt;marquee scrollamount='20'&gt;
&lt;p&gt;
1. To decrease effort to plan 2018, we have copied your team planing from CW49/2017 to CW01/2018. By doing that you will have already all 2017 employees with their individual project setup available to start 2018 planning. That was only applied if no planning was avaialble yet.
&lt;span&gt; &lt;/span&gt;
2. &lt;a href='./rat/docs/RAT_Absence_2018.xlsx' title='Absence calendar 2018' target='_blank'&gt;Absence calendar 2018 available&lt;/a&gt;. Please select your team location and plan absence accordingly. Either use weekly or monthly planning. If detailed vacation planning per employee is known, please update the planning
&lt;span&gt; &lt;/span&gt;
3. Team leaders are requested to use the information regarding target hire date for RAT planning in their project with respect to resources joining in future.  This date can be found in Menu:Reports-&gt;&lt;a href='./team-members'&gt;Team Members List&lt;/a&gt; page as (Internal - &lt;span style='color:#093F7F'&gt;DD-MON-YYYY&lt;/span&gt;).  Please use projx id:100000 for timeline prior to that date.
&lt;/p&gt;
&lt;/marquee&gt; 

&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
