Target Practice CSS Drills prt 2

CSSDrillspart2

1.) To complete the drill for element selectors below, you'll need to target section elements and h1 elements. Specifically:
Write one ruleset for sections that gives them a bottom margin of 90px
Write one ruleset for header elements that sets font-family to Helvetica.


HTML:
<main>
  <section>
    <header>
      <h1>Really important section header</h1>
      <hr/>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias officia quasi, voluptate fuga, perferendis, beatae quam.</p>
  </section>

  <section>
    <header>
      <h1>Really important section header</h1>
      <hr/>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias officia quasi, voluptate fuga, perferendis, beatae quam.</p>
  </section>
</main>

CSS:
main {
  padding: 30px;
}

section {
  bottom-margin:90px;
}

header{
  font-family:Helvetica;
}

//END SOLUTION TO PROBLEM #1 

2.) To complete the drill for element selectors below, you'll need to target elements that have both the .box and .green classes. 
These elements should get a red border.

HTML: 
<main>
  <div class='box width-200 height-100 blue'></div>
  <div class='box width-200 height-100 red'></div>
  <div class='box width-200 height-100 green bordered'></div>
</main>

CSS:
main {
  padding: 30px;
}

main * {
  box-sizing: border-box;
}

.box {
  border: 3px solid green;
  margin-bottom: 30px;
}

.width-200 {
  width: 200px;
}

.height-100 {
  height: 100px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

END SOLUTION TO PROBLEM #2 

3.) To complete the drill, you'll need to write a single ruleset that targets elements that either have both the .box and .foo classes, or elements that have both the .circle and .bar classes.
These elements should get a solid 2px black border.

HTML: 
<main>
  <div class='row'>
    <div class='box blue foo'></div>
    <div class='box red bar'></div>
    <div class='box green foo'></div>
  </div>
  <div class='row'>
    <div class='circle blue bar'></div>
    <div class='circle red foo'></div>
    <div class='circle green bar'></div>
  </div>
   
</main>

CSS:
main {
  padding: 30px;
}

main * {
  box-sizing: border-box;
}

.row {
  margin-bottom: 30px;
}

.box, .circle {
  height: 50px;
  width: 50px;
  margin-right: 30px;
  display: inline-block;
  border: 2px solid black;
}



.circle {
  border-radius: 50%;
  
}

.width-200 {
  width: 200px;
}

.height-100 {
  height: 100px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  border: 2px solid yellow;
}

.green {
  background-color: green;
}

4.)