title: Why do properties of a SPECIFIC div element spread to other separate div elements?
body: <p>I made a small practice website.
  I came up with a problem that is kind of frustrating.</p>
  
  <p>I made a div as follows:</p>
  
  <pre><code>&lt;div class="work-process"&gt;
  
          &lt;div class="container" align="center"&gt;
  
              &lt;div class="col-md-12"&gt;
  
                  &lt;p class="takeaway"&gt; Learn about our creative &amp; unique work process &lt;/p&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-md-12 btn-column"&gt;
  
                  &lt;a href="aboutus.html"&gt;
  
                      &lt;div class="btn btn-workp"&gt;
  
                          &lt;p class="button-text"&gt; Learn More &lt;/p&gt;
  
                      &lt;/div&gt;
  
                  &lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I set the background image of this div, but instead of just setting this small div section, it also made the previous div have the same background-image. In mobile format, the previous div no longer shares the image but this div ("work-process") does and is in the middle overlapping the previous div. When I inspected the element in Chrome, "work-process" seems to span across the ENTIRE page. Why is this?</p>
  
  <p>The CSS: </p>
  
  <pre><code>h1, h2, h3{
      font-family: 'Raleway', sans-serif;
  }
  p{
      font-family: 'Raleway', sans-serif;
  }
  a{
      font-family: 'Raleway', sans-serif;
  }
  .top-infobar{
      background-color: #1A1C27;
  }
  .top-infobar p{
      color: grey;
      font-family: 'Arimo', sans-serif;
      padding-right: 2%;
      padding-left: 2%;
      padding-top: 4px;
      margin-top: 2px;
      display: inline-block;
  }
  .top-infobar p:hover{
      color: white;
  }
  .navbar{
      margin-bottom: 0;
       border-radius: 0
  }
  .navbar-default a{
      color: #2164FF;
  }
  #external_links a{
      font-size: 110%;
  }
  .icon-bar{
      background-color: white;
  }
  /* Jumbotron */
  .humbotron{
      background-image: url("images/nyc.jpg");
      background-repeat: no-repeat; 
      background-position: 56% 25%;
      background-attachment: fixed;
  
  }
  .humbotron h1{
      margin-top: 15%;
      text-transform: uppercase;
      font-size: 500%;
      display:inline-block;
      color: white;
      border: 1px solid white;
      padding-right: 5%;
      padding-left: 5%;
  }
  
  .hook p{
      color: white;
      font-size: 150%;
      margin-top: 1%;
  }
  .hook2 p{
      color: white;
      font-size: 150%;
  }
  @media screen and (max-width: 480px) {
      .humbotron h1{
          font-size: 350%;
      }
  
  }
  .lm-row{
      margin-top: 5%;
      padding-bottom: 5%;
  
  }
  .button{
      border: 1px solid #ffffff;
      padding: 10px;
  }
  .lm-row a{
      text-decoration: none;
      color: #ffffff;
      font-size: 100%;
  }
  .button:hover{
      background-color: #ffffff;
  }
  .lm-row a:hover{
      color: black;
  }
  
  /* Second page */
  .desc-page{
      height:100vh; 
  }
  .header2{
      margin-top: 2%;
      text-transform: uppercase;
  }
  .header-underline{
      border-color: #acadad;
      max-width: 50%;
  }
  #laptop-img-sec{
      margin-top: 5%;
  }
  .laptopimg img{
      max-width: 100%;
  }
  .all-descs{
      height: 100%;
  }
  #images-folder{
      width: 100px;
      float: left;
  }
  .all-descs:hover #circle{
      background-color: #90C3D4;
      -webkit-transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -ms-transition: all 500ms ease;
      -o-transition: all 500ms ease;
      transition: all 500ms ease;
  }
  .all-descs{
      margin-bottom: 5%;
  }
  .complimentary-desc h3{
      text-transform: uppercase;
  }
  /* Work Process advert */
  .work-process{
      background-image: url('images/paint.jpg');
      padding-bottom: 5%;
  }
  .takeaway{
      font-size: 200%;
      padding-top: 5%;
      color: white;
  }
  .btn-column{
      margin-top: 3%;
  }
  .btn-workp {
    font-family: Arial;
    color: #ffffff;
    font-size: 15px;
    padding: 10px 20px 0px 20px;
    border: solid #ffffff 1px;
    text-decoration: none;
  }
  .btn-workp:hover {
    background: #ffffff;
    text-decoration: none;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  </code></pre>
  
  <p>All HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;!-- Head --&gt;
  &lt;head&gt;
      &lt;meta charset="uft-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt; Coherent &lt;/title&gt;
  
          &lt;!-- JQuery --&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; 
          &lt;!-- Bootstrap --&gt;
  
              &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
          &lt;!-- CSS --&gt;
              &lt;link rel="stylesheet" type="text/css" href="home.css"&gt;
  
          &lt;!-- Raleway font --&gt;
              &lt;link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'&gt;
  
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
  
          &lt;!-- Other font --&gt;
  
          &lt;link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  &lt;!-- End of Head --&gt;
  
  &lt;body&gt;
      &lt;div class="top-infobar"&gt;
  
           &lt;p&gt; &lt;span class="glyphicon glyphicon-phone"&gt; &lt;/span&gt;(647)-550-3998&lt;/p&gt;
  
           &lt;p&gt; &lt;span class="glyphicon glyphicon-envelope"&gt; &lt;/span&gt; info@coherent.ca &lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Navigation Bar --&gt;
      &lt;div class="navbar navbar-default"&gt;
  
              &lt;div class="navbar-header"&gt;
  
                  &lt;a href="home.html" class="navbar-brand"&gt; Coherent&lt;/a&gt;
  
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
  
                  &lt;span class="sr-only"&gt;Toggle navigation &lt;/span&gt;
  
                  &lt;div id="collapse-button"&gt;
  
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse"&gt;
  
                  &lt;ul id="external_links" class="nav navbar-nav"&gt;
  
                      &lt;li&gt;&lt;a href="home.html"&gt;Home &lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="aboutus.html"&gt;About Us &lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="services.html"&gt;Services &lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="contactus.html"&gt;Contact Us &lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Homemade Jumbotron --&gt;
      &lt;div class="humbotron col-md-12"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div class="header col-md-12" align="center" id="main_header"&gt;
  
                      &lt;h1&gt; Coherent &lt;/h1&gt; 
  
                  &lt;/div&gt;
  
  
                  &lt;div class="hook col-md-12" align="center" id="first_hook"&gt;
  
                      &lt;p&gt; Hello from the other side &lt;/p&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="hook2 col-md-12" align="center" id="second_hook"&gt;
  
                      &lt;p&gt; To tell u I'm sorry &lt;/p&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="lm-row col-md-12" align="center"&gt;
  
                      &lt;a href="services.html" id="lm-link" class="button"&gt;Learn More&lt;/a&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="desc-page col-md-12"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div class="header2 col-md-12" align="center"&gt;
  
                      &lt;h2 style="font-size: 300%"&gt; &lt;strong&gt; What you get &lt;/strong&gt; with Coherent &lt;/h2&gt;
                      &lt;hr class="header-underline"&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
              &lt;div class="row" id="laptop-img-sec"&gt;
  
                  &lt;div class="laptopimg col-md-6"&gt;
  
                      &lt;img src="images/adele.png" align="center"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="img-qualities col-md-6"&gt;
  
                      &lt;div class="row"&gt;
  
                          &lt;div class="all-descs col-md-12"&gt;
  
                              &lt;img id="images-folder" src="images/skilled-team.png"&gt;  
  
                              &lt;div class="complimentary-desc"&gt;
  
                                  &lt;h3&gt; A &lt;strong&gt; skilled &lt;/strong&gt; and &lt;strong&gt; reliable &lt;/strong&gt; team &lt;/h3&gt;
  
                                  &lt;p&gt; With Coherent, you get a reliable, professional, and experienced team to tend to your graphic design and social media needs &lt;/p&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
  
                          &lt;div class="all-descs col-md-12"&gt;
  
                                  &lt;img id="images-folder" src="images/professional-services.png"&gt;
  
                              &lt;div class="complimentary-desc"&gt;
  
                                  &lt;h3&gt; &lt;strong&gt; Professional &lt;/strong&gt; services &lt;/h3&gt;
  
                                  &lt;p&gt; You can be assured a professional job and final finish. Take a seat, and let the experts handle this &lt;/p&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
  
                          &lt;div class="all-descs col-md-12"&gt;
  
                              &lt;img id="images-folder" src="images/fast-and-efficient.png"&gt;
  
                              &lt;div class="complimentary-desc"&gt;
  
                                  &lt;h3&gt; &lt;strong&gt; Fast &lt;/strong&gt; and &lt;strong&gt; Efficient &lt;/strong&gt; services &lt;/h3&gt;
  
                                  &lt;p&gt; When you have made an order, we ensure that you are our top priority until its finished. &lt;/p&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="work-process"&gt;
  
          &lt;div class="container" align="center"&gt;
  
              &lt;div class="col-md-12"&gt;
  
                  &lt;p class="takeaway"&gt; Learn about our creative &amp; unique work process &lt;/p&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-md-12 btn-column"&gt;
  
                  &lt;a href="aboutus.html"&gt;
  
                      &lt;div class="btn btn-workp"&gt;
  
                          &lt;p class="button-text"&gt; Learn More &lt;/p&gt;
  
                      &lt;/div&gt;
  
                  &lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>