Cards are in 2 rows?

i tried to make something new in materializecss and I created one div with class row in which I have put 2 cards.one cards is in div with class col s4 and other one is in div with class col s8. Those cards are in 2 separate rows. Cannot figure out why. Why are they not in same row?

here is example of code, first div with class row does not work fine, second one works fine, what is the difference?

<div class="row"><!-- start top vijesti -->
  <div class="col s1">1</div>
  <div class="col s7">ff</div>
  <div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
  <div class="col s1">1</div>
  <div class="col s1">2</div>
  <div class="col s1">3</div>
  <div class="col s1">4</div>
  <div class="col s1">5</div>
  <div class="col s1">6</div>
  <div class="col s1">7</div>
  <div class="col s1">8</div>
  <div class="col s1">9</div>
  <div class="col s1">10</div>
  <div class="col s1">11</div>
  <div class="col s1">12</div>
</div>

Solution

I tried replicating your problem but did not see anything wrong with it. Perhaps you might want to have a look at this (if that is what you are trying to achieve) to see if you are doing it right, or probably fork it or post your code for us to actually determine what is wrong.

HTML:

<div class="row"><!-- start top vijesti -->
    <div class="col s1">1</div>
    <div class="col s7">ff</div>
    <div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
    <div class="col s1">1</div>
    <div class="col s1">2</div>
    <div class="col s1">3</div>
    <div class="col s1">4</div>
    <div class="col s1">5</div>
    <div class="col s1">6</div>
    <div class="col s1">7</div>
    <div class="col s1">8</div>
    <div class="col s1">9</div>
    <div class="col s1">10</div>
    <div class="col s1">11</div>
    <div class="col s1">12</div>
</div>
<div class="row">
    <div class="col s4">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
    <div class="col s8">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
</div>

CSS:

.col {
    border: 1px solid;
}

.row {
    border: 1px dotted;
}