<style> * { box-sizing: border-box; } .header { border: 1px solid green; padding: 15px; } .row::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } [class*="col-"] { float: left; padding: 15px; border: 3px solid blue; } /* This is allocating layout spaces for how the website is going to be allocated the spaces for different contencts. */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4CAF50; } @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 15px; line-height: 30px; color: #777; background: #ffffff; } .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #contact input[type="Airline"], #contact input[type="Flight_Number"], #contact input[type="Departure"], #contact input[type="Arrival"], #contact input[type="Time"], #contact input[type="Morning_AfterNoon_Night"], #contact input[type="Price"], #contact button[type="submit"], #contact button[type="First_Name"], #contact button[type="Last_Name"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #contact { background: #F9F9F9; padding: 25px; margin: 15px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #contact h3 { display: block; font-size: 30px; font-weight: 300; margin-bottom: 10px; } #contact h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="Airline"], #contact input[type="Flight_Number"], #contact input[type="Departure"], #contact input[type="Arrival"], #contact input[type="Time"], #contact input[type="Morning_AfterNoon_Night"], #contact input[type="Price"], #contact input[type="First_Name"], #contact input[type="Last_Name"] { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contact input[type="Airline"]:hover, #contact input[type="Flight_Number"]:hover, #contact input[type="Departure"]:hover, #contact input[type="Arrival"]:hover, #contact input[type="Time"]:hover, #contact input[type="Morning_AfterNoon_Night"]:hover, #contact input[type="Price"]:hover, #contact input[type="First_Name"]:hover, #contact input[type="Last_Name"]:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contact textarea { height: 100px; max-width: 100%; resize: none; } #contact button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #4CAF50; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 20px; } #contact button[type="submit"]:hover { background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contact button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } </style>