有什么问题？（Wordpress（HTML / CSS））

Question

I dont know what but my posts are colliding with the navigation bar like this: http://i.imgur.com/y2qhEzH.png

Thanks if you can help:)

The navigation bar HTML/php

<div>
         <nav class="site-nav">

            <?php

            $args = array(
                'theme_location' => 'primary'
            )

            ?>

            <?php wp_nav_menu( $args); ?>

        </nav> </div>

Post HTML/php

    <div>
  <?php
    if(have_posts()): 
        while (have_posts()) : the_post(); ?>
            <h2><a a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></h2>
            <?php the_content(); ?>

    <?php endwhile;

    else :
        echo '<p>No content found</p>';

            endif;
?> </div>

Css

.site-nav ul {
    margin: 0;
    padding: 0;
}
.site-nav ul li {
    list-style: none;
    float: left;
}

.site-nav ul li a:link,
.site-nav ul li a:visited {
    display: block;
    padding: 10px 18px;
    border-top: white 3px solid;
    text-decoration: none;

}

Im just starting to learn wordpress, and I litterally cant get past this. HELP:)

Answer 1

Try adding this to your CSS:

.site-nav {
  float: left;
}

Here's a Fiddle of what your setup might look like minus the PHP, and here's one with the fix.

Full Code

.site-nav ul {
    margin: 0;
    padding: 0;
}
.site-nav ul li {
    list-style: none;
    float: left;
}

.site-nav ul li a:link,
.site-nav ul li a:visited {
    display: block;
    padding: 10px 18px;
    border-top: white 3px solid;
    text-decoration: none;

}

/* Added this to simulate your window size */
.container {
  width: 360px;
}

/* Fix */
.site-nav {
  float: left
}

<div class="container">
  <div>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Logos</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </nav>
  </div>
  <div>
    <h2><a href="">Welcome</a></h2>
    <p>Hey!</p>
    <p>Welcome to our site.</p>
  </div>
</div>
  

</div>