divsが下に表示されるCSS

Question

navbarの下にいくつかのコンテンツを表示したい今、私のコンテンツとナビゲーションバーは、お互いの上に置かれています。この問題を修正するためにどのCSSプロパティを追加/変更するかわかりません。私はdisplay: block;を使うはずです。 CSSここ

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') 
); 

されています：

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

がJSXです：しかし、私はここで

は例のjsfiddleで、それをどこに配置するかわからないんだけど

.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

のposition: absolute;を削除してください必要な出力が得られます。

Fiddle