Full width class - foundation framework - html

Question

first time user of Foundation framework, I've developed all my previous websites with Bootstrap but now I'm forced to built one website with foundation. I noticed they are pretty similar but somehow different frameworks.
I've encountered a problem and hope you can help me with this.
I need to add a banner to a website which is full width and text which is within the grid and has a bg which is also full width, see what I mean here:
Here is my html:
<div class="fullWidth">
<div class="banner">
<div class="logo">
<img src="images/logo.svg"/>
</div>
<div class="row">
<div class="bg-tagline">
<h1 class="tagline">some text here</h1>
</div>
</div>
</div>
</div>
and the css:
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.banner {
background: white url("images/baner.jpg") no-repeat center;
height: 590px;
background-size: cover;
position: relative;
}
.logo {
position: relative;
padding: 1%;
height: 5em;
width: 5em;
}
.bg-tagline {
color: #fff !important;
background-color: white;
width: 100%;
margin: 0px auto;
}
.bg-tagline h1 {
color: #fff !important;
font-size: 1.2em;
text-align: center;
}

Answer 1

As far as I know, there's no a "full width" class in foundation framework; Normally, in those layout types, I'd just use the elements off the framework, for instance:
<header id="banner">
<div class="slogan">Your text banner here</div>
</div>
And of course some CSS like you have already. If you need something elaborated (like a layout using foundation's classes), I'd put inside div.slogan a div.row, and start building layout from there, of course that row would be restricted to the max width from the framework.
BTW, if you need to have the entire framework having a wider width for the rows, you can change the framework settings and re-compile.

Answer 2

Personally, I like to make utility class for rows:
.row.fullwidth {
max-width:100em; // set your override width here
margin: 0 auto;
}
That way whenever I need a full width section I just do:
<div class="row fullwidth">
<!--- content --->
</div>