Container problem


#1

Hello! I've been working on this project, and I have some uncertainties about containers.
I built two divs with class name container, one inside div=class"jumbotron" and one inside div=class"supporting-1". When I write in CSS editor .container: { max-width: 1000px; } it only applies on container inside div=class"supporting-1" and not in div=class"jumbotron". If i write in CSS editor .jumbotron .container { max-width: 1000px; } then it will apply width. My question is why is this happening? Why CSS editor doesnt apply width of container on every container on page when i write first css code?


#3

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <div class="header">
          <div class="row">
            <div class="col-md-3">
              <img width=106 height=75 src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg">
            </div>
            <div class="col-md-9">
              <ul class="pull-right">
                <li><a href="#">Features</a></li>
                <li><a  class="btn btn-default" href="#">Download</a></li>
              </ul>
            </div>
          </div>
        </div>
      
      <div class="main">
        <div class="row">
          <div class="col-md-7">
            <h1>Turn Up the Bass</h1>
            <p>From the newest releases to classic albums, we have the best music for you to enjoy.</p>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="supporting-1">
      <div class="container">
      <div class="col-md-6">
        <img width=450 height=300 src="https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg">
      </div>
      <div class="col-md-6">
        <h2>Music Just for You</h2>
        <p>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
      </div>
    </div>
  	</div>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}

.jumbotron .container {
  max-width: 90%;
}

.container {
  max-width: 1000px;
}

.jumbotron {
 background: url("https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg") center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 560px;
  margin-bottom: 0;
}

.header li {
  display: inline-block;
  margin-left: 20px;
  font-weight: bold;
}

.header ul {
  margin: 40px 0 0 15px;
}

.header li a {
  color: #fff;
}

.header .btn-default {
  background-color: #FF003D;
  border-radius: 0;
  border: none;
  padding: 8px 30px;
  font-weight: bold;
}

.header .btn-default:hover {
  color: #333; 
  text-decoration: none;
}

.main {
  color: #fff;
  padding: 70px 0;
}

.supporting-1 {
  text-align: left;
  color: #fff;
  height: 400px;
  background: #161718;
  padding: 70px 30px;
}

#4

It's because if the above ^ remove .container from it


#5

bootstrap (which you included) has this code in the file:

.jumbotron .container {
    max-width: 100%;
}

oops, that seems conflicting with your code:

.container {
   max-width: 1000px;
}

now, css uses a point system to decide which to apply. The css property/chain with the most points get applied. .jumbotron .container is 20points, .container is 10points. So your css gets overwritten, if you do:

.jumbotron .container {
   max-width: 1000px;
}

the points are now equal (20 each) so the last property (yours) gets applied (in case of equal points, the order is important), does this help?

Bootstrap doesn't have a .supporting-1 .container rule, so your .container will overwrite the default bootstrap .container (equal points, yours is last, so yours gets applied)


#6

I undestand now, didnt know that bootstap has its own property for .jumbotron .container.
So if property in bootstrap has one class (like .jumbotron) that gives him 10 points, and if it has two classes (.jumbotron .container) that gives him 20 points? If i want to overwrite it I have to write exactly the same property that was writen in bootsrap?


#8

yea, both bootstrap:

.jumbotron .container {
    max-width: 100%;
}

and you:

.jumbotron .container {
   max-width: 90%;
}

seem to have multiply property's for the same thing. To overwrite something you either need the same amount of points (but then yours has to come later, the last property gets applied) or more points, for example this:

body .jumbotron .container

would be 21 points (1 point for body)


#9

Isnt my property always last?


#10

Guess if you include boostrap first, and then your css file it is. Which is recommended, since then it is much easier to overwrite bootstrap property's


#11

All understood, thx for help!