How do you change the transparency of an element without changing the transparency of it's child elements?

The short answer is that you can't with the opacity property, but you can with a properly placed rgba() property.

With rgba(), you can specify a color (in RGB format, not a #hex) and alpha (opacity). You didn't specify a color in your example above, so assuming you want .main-header to have black text, add the color property and value below. Remove both opacity and filter.

 .main-header {
    padding-top: 1px;
    padding-bottom: 1px;
    opacity: 0.7;
    filter: alpha(opacity=50); /* Modern browsers recognize opacity (including IE), so this property isn't necessary. */
    color: rgba(0, 0, 0, 0.7); /* The last value [0.7] is the apha/opacity */
  }

White (again with 0.7 alpha) would instead be rgba(255,255,255,0.7). Alternatively, if in your example you were trying to give .main-header a semi-transparent background, you would simply change color to background, like so:

 .main-header {
    ...
    background: rgba(0, 0, 0, 0.7); /* This would give us a semi-transparent black background */
    ...
  }

Going Deeper Unlike most CSS properties where children overwrite their parents (for example, "background: red" on a child would give the child a red background, despite its parent having a "background: green"), opacity is additive. That is, the parent's opacity affects its children (and can't be overwritten). opacity was added a long time ago before a lot of the newer conventions with selectors, and (from my understanding) was added largely for convenience. With a single property, you can make an entire element and all of its children (even if there are 1000's of children) semi-transparent. If opacity didn't behave this way, you might have had to give a special classname or manually specify opacity for every single one of the children elements, which (either way) is just messy.

Note that this doesn't mean opacity on child elements is useless - you can still set opacity on the children elements, but the most opaque they will ever be would the opacity of 0.7.

With the latest updates to CSS and browsers handling naming conventions and selectors better (for example, we can now select all children divs with something like ".parent > div {}"), it would perhaps seem to make sense that opacity should be changed to conform with other CSS properties. However, changing opacity is still much simpler and less verbose when interacting with CSS from other languages (like JS), so it does still have its time and place for use.

Hope that helped :)