How to style/theme an openlayers map block?

Question

I can't seem to figure out how to target the block that my OpenLayers map sits in. I've switched from a Gmap to an OpenLayers implementation, so I already know which styles I want to apply to the Map block itself, but when I mess with the styles in chromes dev tools I get strange results such that my points and map controls get moved, but not the map container itself

So applying the styling to the map block directly in dev tools result in the base-layer being pushed off and inaccurate. It looks like the map block and div id's get generated by the javascript in openlayers on each page load, so I'm not sure exactly how or where to apply my CSS. I get similar results when I target the map container div as well.

This the css I was applying to the Gmap

#block-views-phi-rho-chapter-map-block-1 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 720px) {
  #block-views-phi-rho-chapter-map-block-1 {
    width: 85%;
  }
}
    .view-phi-rho-chapter-map {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 10px solid #dbdbdb;
}

Answer 1

ok, so the answer should have been more obvious to me but I'm not really a front-end guy so it took a little head scratching to see that I just had to target the block by class rather than id...