Margin top don’t work

I am trying to set margin top to the inside div (“main”) but it’s not working, and sometimes it pushed the outside div (“news_wrapper”) instead.

Here is the fiddle link: https://jsfiddle.net/g2a9bpnd/

This is the div that need to get the margin top:

#main {
  margin-top:30px;
  background-color: #FFF;
  padding: 0 30px 0 28px;
  border-radius: 4px;
  text-align: left;
  color: #494949;
  border: 1px solid #d0d1d3;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0px auto;
  width: 150px;
  padding: 23px;
  min-height: 350px;
  height: auto;
}

solution

That’s because of collapsing margins.

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

One option to fix this would be to add overflow: hidden to the element #news_wrapper. In doing so, this will establish a new block formatting context.

Updated Example

#news_wrapper {
  width: 100%;
  width: 600px;
  height: 100%;
  min-height: 800px;
  margin: 0 auto;
  background-color: #34353A;
  overflow: hidden;
}

As a side note, margin: 0px auto was overriding margin-top: 30px.

Either add the margin-top after,

margin: 0 auto;
margin-top: 30px;

..or use the shorthand:

margin: 30px auto 0;