Add words into a text slider css

I'm struggling to add more words at this slider.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

<!-- language: lang-html -->

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
  </div>
  AweSoMe!
</div>

<p>a css3 animation demo</p>

<!-- end snippet -->

Works fine with 3 words but I need 7

After changing the html with this one

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

<!-- language: lang-html -->

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
    <div><div>wOrK2</div></div>
    <div><div>lifeStyle2</div></div>
    <div><div>Everything2</div></div>
    <div><div>wOrK3</div></div>
  </div>
  AweSoMe!
</div>

<!-- end snippet -->

There no change and I don't find a way to reach my goal with the CSS

I don't need background etc ...

In fact I would love to have a div centered on my page with:
[My words] Text Slider [My words 2]
but with "Text Slider" align left with 7 words (or more) into the slider

Page test where I'm working on it : https://www.petrescue.do/test/

If anyone can help me with this... It would be greatly appreciated
Thanks in advance

The reason this is happening is because of this code:

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

You are only changing the margin-top to have 3 different values. To see what I mean, I've removed the overflow:hidden and added a red border to the #flip element so you can see what is happening.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  /*overflow:hidden;*/
  border: 1px solid red;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

<!-- language: lang-html -->

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
    <div><div>wOrK2</div></div>
    <div><div>lifeStyle2</div></div>
    <div><div>Everything2</div></div>
    <div><div>wOrK3</div></div>
  </div>
  AweSoMe!
</div>

<!-- end snippet -->

To fix this you will need to add the other margin-top offset positions. Probably something like this:

@keyframes show {
  0%, 12%, 100% {margin-top:-630px;}
  13%, 25% {margin-top:-540px;}
  26%, 38% {margin-top:-450px;}
  39%, 41% {margin-top:-360px;}
  42%, 54% {margin-top:-270px;}
  55%, 67% {margin-top:-180px;}
  68%, 80% {margin-top:-90px;}
  99.99% {margin-top:0px;}
}

It's not perfect, but you get the idea. You'll have to play with the timings on it. FYI, you'll notice you can use multiple percentages to have the same value, this way you don't need to repeat the value in the keyframe animation.

See it kinda-working below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 10s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0%, 12%, 100% {margin-top:-630px;}
  13%, 25% {margin-top:-540px;}
  26%, 38% {margin-top:-450px;}
  39%, 41% {margin-top:-360px;}
  42%, 54% {margin-top:-270px;}
  55%, 67% {margin-top:-180px;}
  68%, 80% {margin-top:-90px;}
  99.99% {margin-top:0px;}
}

<!-- language: lang-html -->

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
    <div><div>wOrK2</div></div>
    <div><div>lifeStyle2</div></div>
    <div><div>Everything2</div></div>
    <div><div>wOrK3</div></div>
  </div>
  AweSoMe!
</div>

<!-- end snippet -->