body{
  border: 5px solid;
  margin: 0px;
}

#box1{
  border: 5px solid;
  width: 250px;
  height: 250px;
  font-size: 22px;
  background: greenyellow;
  
 margin-right: auto;
 margin-left: auto;
}

#box2{
  border: 5px solid;
  width: 250px;
  height: 250px;
  font-size: 22px;
  background: blue;
}

/*notes
-- # is for id (to name an individual element)    
-- none for elements (body, head, div, etc)
-- . is for classes (tags to refer to a group of different things)

--padding is for inner space inside an element
--margins is for outer space outside an element
--padding/margin sides, ex. margin-top padding-bottom padding-left
--padding/margin by itself is same as all sides
--padding/margin percentages push it that amount of the width of window. ex, margin-left: 50%; = pushes box to the right side of 50% which is the right side of the middle of the screen. margin-left 33% might be middle too.

-- positions
-- static, natural state
-- relative, in relation to its original point. ex, if box is naturally laying in top left then position: relative; top:100px; left:100px; = box moves 150px from the left and top by 100px
--absolute, element taken out of flower of document, things will ignore it.