[SOLVED] Layout issue - <Box> won't center

[ScottAgirs]

Need help centering in a template where the is 600px and centered, tried few ways, nothing works, my best attempt is below:

import React from "react";
import { Box, Email, Item, Span, A, renderEmail } from "react-html-email"; // note we added renderEmail to this import statement

// added our const that holds a string of css (it is worth noting that we can also do inline jss styles as well)
const css = `
body {
  background-color: #244a74;
  text-align: center;
}
@media only screen and (max-device-width: 480px) {
  font-size: 20px !important;
}

.container{
  width:600px;
  margin:0 auto;
  background: rgba(255,255,255,0.9)
}

`.trim();

const TeacherStudioCreatedTemplate = () => {
  const textDefaults = {
    fontFamily: "Verdana",
    fontSize: 42,
    fontWeight: "bold",
    color: "orange"
  };

  return (
    <Email title="Title" headCSS={css}>
      <Box className="container">
          <Item>
            <Span {...textDefaults}>
              text
            </Span>
        </Item>
      </Box>
    </Email>
  );
};

[ScottAgirs]

Hate when this (struggling for hours and then finding solution right after posting) happens.

If anyone else runs into this issue - the trick is to add float: none to the element you want to center, looks like react-html-email have have some defaults that include float (?) not sure ...