Responsive website layout

<div class="flexContainer flexColumn fullHeight whiteBackground">
    <nav class="flexContainer blueBackground">
        <ul class="nav flexItem flexStart">
            <li><a href="#">Company Name</a></li>
        </ul>
        <ul class="nav flexContainer flexEnd">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <div class="flexContainer flexItem">
        <main class="flexItem whiteBackground main">
            <p>Put Content Here</p>
                <a href="index.html" class="homeButton">Return Home</a>
            </div>
        </main>
        <aside class="sidebar sidebarLeft">
            <h2>Left Sidebar</h2>
            <p>Put your content here</p>
        </aside>
        <aside class="sidebar sidebarRight">
            <h2>Right Sidebar</h2>
            <p>Put your content here</p>
        </aside>
    </div>
    <footer class="flexContainer flexCenter blueBackground whiteText height50">&copy; Jennifer Bland</footer>
</div>

The html structure is wrong.
The div and the main element are closed wrong