Menu icon Foundation
Background color is not going full width

 Hello.
I hope somebody can help me here, because I have been struggling for several days now.
 
I recently started using Foundation for emails 2 with CSS. I am having quite a hard time to crack this nut. I have to make a design where the is looking like the below picture.


I have actually managed to make some of it, but I am running into a wall because I start making to much of my own CSS, and that mess up on outlook and gmail. 

My biggest problem is the background color. Every row is gonna have a new color, and the colours have to go full width. How am I doing that correct? I tried to make some code, and tested the code in Litmus. The background-color is not going full width. 

Is there something I am doing really wrong here?

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- The character set should be utf-8 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <!-- Link to the email's CSS, which will be inlined into the email -->
  <link rel="stylesheet" href="css/foundation-emails.css">
  <style>
    
  </style>
</head>

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <table class="wrapper" align="center">
            <tr>
              <td class="wrapper-inner" bgcolor="#756">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="columns first last"bgcolor="#756">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be.</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td class="wrapper-inner" bgcolor="#465">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="columns first last"bgcolor="#465">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>





gridwrapperbackground-color

 Hello.
I hope somebody can help me here, because I have been struggling for several days now.
 
I recently started using Foundation for emails 2 with CSS. I am having quite a hard time to crack this nut. I have to make a design where the is looking like the below picture.


I have actually managed to make some of it, but I am running into a wall because I start making to much of my own CSS, and that mess up on outlook and gmail. 

My biggest problem is the background color. Every row is gonna have a new color, and the colours have to go full width. How am I doing that correct? I tried to make some code, and tested the code in Litmus. The background-color is not going full width. 

Is there something I am doing really wrong here?

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!-- The character set should be utf-8 -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <!-- Link to the email's CSS, which will be inlined into the email -->
  <link rel="stylesheet" href="css/foundation-emails.css">
  <style>
    
  </style>
</head>

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <table class="wrapper" align="center">
            <tr>
              <td class="wrapper-inner" bgcolor="#756">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="columns first last"bgcolor="#756">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be.</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td class="wrapper-inner" bgcolor="#465">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="columns first last"bgcolor="#465">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>