I have this exercise which i am trying to move the main contents (content 1 and content 2)
In the middle between two side menus. Currently, main contents flow above two menus. Can someone tell me how to set it right? 
Thank you.

---

> 
> **style.css**
> 
> 
> 

```
        body {
            color: #000305;
            background-image: url('images.jpg');
            font-size: 87.5%;
            font-family:Arial;
            line-height: 1.5;
            text-align:left;
        }

        a{
            text-decoration:none;
        }

        a:link, a:visited {
            color:#CEFC3F;  
        }

        a:hover, a:active{
            background-color:#CEFC3F;

        }

        .body{
            margin: 0 auto;
            width: 90%;
            clear:both; 
        }

        .mainHeader img{
            width: 100%;
            height:100px;
            margin:2% 0;
        }

        .mainHeader nav {
            background-color: #666;
            height: 40px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .mainHeader nav ul {
            list-style:none;
            margin: 0 auto;
        }

        .mainHeader nav ul li{
            float:left;
            display:inline;

        }

        .mainHeader nav a:link, .mainHeader nav a:visited {
            color: #fff;
            display: inline-block;
            padding: 10px 25px;
            height: 20px;
        }

        .mainHeader nav a:hover, .mainHeader nav a:active,
        .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
            background-color: #CEFC3F;
            text-shadow:none;
        }

        .mainHeader  nav ul li a{
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
        }

        .mainContent{
            line-height:25px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;     
        }

        .content{
            width:50%;      

        }

        .subContent1{
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            padding:3% 5%;
            margin-top:2%;
        }

        .subContent2{
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            padding:3% 5%;
            margin-top:2%;
        }

        .leftNav{
            width:16%;
            float: left;
            background-color: #fff;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
            padding: 2% 3%;     
        }

        .rightNav{
            width:16%;
            float:right;    
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
            padding:2% 3%;          
        }

        .footer{
            width: 100%;
            float:left;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            margin: 2% 0 2% 0;
            background-color: #666;
        }

  index.html
        <!DOCTYPE html>
        <html lang="en">

        <html>
            <head class="top_header">

                <meta charset="utf-8"/>
                <link rel="stylesheet" href="style.css" type="text/css"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body class="body">
                <div class="mainHeader">            
                    <img src="Lighthouse.jpg"/>
                    <nav><ul>
                        <li class="active"><a href="#">My Account</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul></nav>
                    <div class="search_tab">
                        <div class="search_textbox">
                        </div>
                        <div class="search_button">
                        </div>
                    </div>
                </div>
                <div class="mmainContent">
                    <div class="content">
                        <div class="subContent1">
                            <h2>Content 1</h2>
                            <p>Here is a sub-content     Here is a sub-content Here is a sub-content Here is a sub-content 
                            Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content 
                            Here is a sub-content Here is a sub-content 
                            </p>
                        </div>

                        <div class="subContent2">
                            <h2>Content 2</h2>              
                            <p> this is a paragraph this is a paragraph this is a paragraph this is a paragraph 
                            this is a paragraph this is a paragraph this is a paragraph this is a paragraph 
                            this is a paragraph this is a paragraph this is a paragraph this is a paragraph
                            </p>
                        </div>
                    </div>
                </div>
                <div class="leftNav">
                    <h2><a>Left Menu</a></h2>
                    <p>This is a left menu This is a left menu This is a left menu This is a left menu This is a left menu 
                    This is a left menu This is a left menu This is a left menu This is a left menu 
                    This is a left menu This is a left menu This is a left menu </p>
                </div>

                <div class="rightNav">
                    <h2><a>Right Menu</a></h2>
                    <p>This is a right menu This is a right menu This is a right menu This is a right menu This is a right menu 
                    This is a right menu This is a right menu This is a right menu This is a right menu 
                    This is a right menu This is a right menu This is a right menu This is a right menu 
                    </p>
                </div>
                <footer class="footer">
                    <p>All Right Reserved!</p>
                </footer>

            </body>
        </html>

```