Who Am I Who Am I -4 years ago 39
CSS Question

Div container outside div

Hello everyones can help me, I have a mockup and I want to ceonvert to Bootstrap, but i have a problem with my container element, if on media query 1024px, an elemnt there's on outside div.

This is my code

<div class="footer">
<div class="footer-up">
<div class="container">
Objectively pursue extensible web services whereas cooperative deliverables. Phosfluorescently mesh optimal alignments and interoperable niche markets. Credibly whiteboard premium technology and orthogonal customer service. Energistically.
</div>
</div>
</div>


my-code

So how to fix its? Thanks before

Answer Source

You need to set a margin on your container

.homepage {
  margin: 50px 0;
  padding: 0 5%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.page-content {
  padding: 3% 0;
  background: #fcfef3;
  border-radius: 50px;
  box-shadow: 0 8px 16px -2px #929497;
}
.footer {
  display: inline-block;
  padding: 0 8%;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}
.footer-up {
  background: #e62731;
  padding: 50px 0;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.container{
  margin: 15px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="homepage">
  <div class="page-content">
    <div class="container">
      Energistically cultivate multidisciplinary portals rather than covalent products. Dynamically maintain functionalized technologies with fully tested solutions. Objectively target low-risk high-yield benefits for end-to-end infomediaries. Proactively coordinate visionary initiatives without team driven convergence. Holisticly transform mission-critical resources whereas low-risk high-yield meta-services.

Seamlessly repurpose enabled technology after reliable technologies. Conveniently reinvent 2.0 results vis-a-vis reliable meta-services. Energistically matrix bricks-and-clicks e-tailers after installed base content. Completely reinvent extensive results whereas synergistic relationships. Holisticly aggregate business supply chains rather than frictionless ideas.

Synergistically.
    </div>
  </div>
</div>

<div class="footer">
  <div class="footer-up">
    <div class="container">
      Objectively pursue extensible web services whereas cooperative deliverables. Phosfluorescently mesh optimal alignments and interoperable niche markets. Credibly whiteboard premium technology and orthogonal customer service. Energistically.
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download