Правильная прокрутка и ширина CSS

Question

как мне заставить мой прокручиваемый текст начинаться прямо в начале страницы, обновиться sh вместо того, чтобы видеть все пустое пространство перед текстом.

Это и когда я настраиваю ширину на 100%, она обрезается, поэтому я использую пиксели. Текст находится между тегами body, wrapper, content и scroll-left.

body {
  text-align: center; 
}

.wrapper {
  margin: 0 auto;
  width: 1000px;
}

.content {
  float: left; 
  width: 100%;
}

.scroll-left p {

  position: absolute;
  width: 290%;
  height: 100%;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  line-height: 100%;
  text-align: left; 
  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%); 
} 
@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    /* Browser bug fix */
    -webkit-transform: translateX(100%);
    /* Browser bug fix */
    transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);
  }