divs to appear below one another CSS

Question

I want to have some content appear below my navbar. Right now my content and my navbar is placed on top of each other. I'm not sure which CSS property to add/change to fix this issue. I believe I am supposed to use display: block;. However I'm not sure where to place it

Here is a jsfiddle of an example:

https://jsfiddle.net/liondancer/69z2wepo/39146/

Here is the JSX:

var Logo = React.createClass({
render: function() {
    return (
    <a href="/"> Here </a>
  );
}
})

var NavBar = React.createClass({
  render: function() {
    return (
      <div className="navigation">
                <div className="container">
                    <Logo/>
                    <div className="site-navigation">
                        <ul>
                            <li>
                                <a href="/gallery">Gallery</a>
                            </li>
                            <li>
                                <a href="/news">News</a>
                            </li>
                            <li>
                                <a href="/contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    );
  }
});

var Content = React.createClass({
  render: function() {
    return (
        <div className="content-container">
                This is home.
            </div>
    );
  }
})

var Layout = React.createClass({
    render: function() {
    return (
       <div>
         <NavBar/>
         <Content/>
       </div>
    );
  }
})

ReactDOM.render(
  <Layout/>,
  document.getElementById('container')
);

Here is the CSS:

.navigation {
    position: absolute;
    width: 100%;
}

.container {
  position: relative;
  width: auto;
  padding: 0 50px;
  margin: 10px auto 0px auto;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  margin: 0;
  height: 45px;
}

.site-navigation {
  float: right;

 }

.site-navigation ul li{
   display: inline;
 }

.site-navigation ul li a {
   text-decoration: none;
   padding: 25px;
 }

.site-navigation ul li a:hover {
   padding-bottom: 10px;
   color: #FFFFFF;
   transition: all 0.25s ease-in-out 0s;
}

Answer 1

Remove position: absolute; on your .navigation and you will have the desired output.

Fiddle