divs unter einander zu erscheinen CSS

Question

Ich möchte etwas Inhalt unter meiner navbar erscheinen lassen. Gerade jetzt sind mein Inhalt und meine Navbar übereinander gelegt. Ich bin mir nicht sicher, welche CSS-Eigenschaft hinzugefügt/geändert werden muss, um dieses Problem zu beheben. Ich glaube, ich sollte display: block; verwenden. Allerdings bin ich nicht sicher, wo es zu platzieren

hier ein jsfiddle eines Beispiels ist:

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

Hier ist die 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') 
); 

Hier ist die 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

Entfernen Sie position: absolute; auf Ihrem .navigation und Sie werden die gewünschte Ausgabe haben.

Fiddle