CSS style marquee position

I have a CSS marquee. Everything is working besides:

• It should be 10% of the screen
• Clued to the bottom of the screen,
• 100% width (bottom: 0px Left: 0px

Here is my code:

CSS

<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
}

.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 20s linear infinite;
background-color: #000000;
color: white;
bottom: 0px;
}

/* Make it move */
@keyframes marquee {
0%   { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: relative;
font: 25px 'Verdana';
bottom: 0px;
left: 0px;
}
</style>

HTML

<p class="scroll marquee"><span>Text to appear here</span></p></body>