I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs.
My goal is to apply attributes to the parent div instead of each individual div. Any suggestions?
<!DOCTYPE html>
<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="styles_sample.css">
</head>
<body>
<div id="sell_section">
<h2>Sell, Manage, & Market in one easy system</h2>
<hr class="hr_1">
<div class="box1">
<img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
</div>
<div class="box1">
<p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
</div>
</div>
</body>
</html>
styles_sample.css
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: auto;
position: relative;
overflow: auto;
padding: 0 5%;
max-width: 990px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h2 {
text-align: center;
font-family: DIN;
font-size: 40px;
color: #8b8b8b;
text-align: center;
width: 100%;
font-weight: normal;
}
p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #8b8b8b;
font-size: 16px;
line-height: 150%;
}
.hr_1 {
position: relative;
padding: 0;
margin: 2% auto;
height: 0;
width: 400px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aecd37;
border-bottom: 1px solid #aecd37;
}
.box1 {
width: 50%;
min-width: 50%;
position: relative;
min-height: 1px;
}
@media (min-width: 830px) {
.box1 {
float: left;
}
}
@media (max-width: 830px) {
.box1 {
width: 100%;
}
}