<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
   
    
        
    
<div class="nitDiv">
<div >
<nav > <form> <ul>
        <li>Customer</li>
        <li ><select class="nitInput">
    <option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option>      <option value="audi">Audi</option>
    </select></li>
      <li>Product Family</li>
        <li><select class="nitInput">
     <option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option>      <option value="audi">Audi</option>
    </select></li>
    <li>Product Type</li>
        <li><select class="nitInput">
      <option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option>      <option value="audi">Audi</option>
    </select></li>
        <li>Part Number</li>
        <li><select class="nitInput">
     <option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option>      <option value="audi">Audi</option>
    </select></li>
    <li><button type="submit" class="nitButton">Apply</button></li>
  </ul>
    
  </form>
  </nav>

</div>
<article> 
  <p><input type="text" class="nitInput" placeholder="Search by Part Number / Serial Number" style="min-width:290px; margin-top:80px"/>
  <button type="submit" class="nitButton" style="background-color: #008CBA;">Search</button></p>
</article>
 

</div>

 </body>
</html>
// Code goes here

/* Styles go here */

/* Place custom CSS styling for demoWidget widget at runtime in this file */

.widget-demowidget {

}
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 17px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

.nitDiv{
      background-color: #f1f1f1; 
      overflow: auto;
      

}
.nitInput{
   border-style: solid;
    border-color: lightgray;
    color: black;
    padding: 7px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  
    margin: 4px 2px;
    cursor: pointer;
}
.nitButton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 7px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;

    margin: 4px 2px;
    cursor: pointer;
}