css - 容器与标题重叠

Question

我的容器有问题，它实际上与标题重叠，如何在 css 中调整它？它应该在标题下方，标题和容器之间有一点边距。

请看这里的截图

    #myHeader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      background-color: YELLOW; 
      box-shadow: 0px 2px 3px  #888888;
      height: 150px;  
      opacity:0.95;
      filter:alpha(opacity=10);  
    }

#myContent {
    padding-top: 10px;

}

#myContent .row {
    background-color: #fff;
}

#myContent h1{
  margin-top: 0;

}    


    <section id="myContent">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-8 col-lg-8">
                    <div>
                        <br />
                        <?php if ($breadcrumb): ?>
                          <div id="breadcrumb"><?php print $breadcrumb; ?></div>
                        <?php endif; ?>

                        <?php print $messages; ?>

                        <div id="content" class="column"><div class="section">
                          <a id="main-content"></a>
                          <?php print render($title_prefix); ?>
                          <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
                          <?php print render($title_suffix); ?>
                          <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
                          <?php print render($page['help']); ?>
                          <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
                          <?php print render($page['content']); ?>
                          <?php print $feed_icons; ?>
                        </div></div> <!-- /.section, /#content -->

                        <?php if($is_front):?>
                        <h2>MISSION & VISION<br /></h2>
                        <!-- <img src="<?php print(path_to_theme()); ?>/images/Bottom.jpg" alt="" class="img-thumbnail pull-left" style="margin-right: 10px;" /> -->
                        <div>
                            Our company comes to trade few years ago but from beginning we start to do only professional projects.
                            We our not satisfied with just good result. It needs to be perfect.
                            <br /><br />
                            That's why we teach our employers still to make them the best in this region.
                            Every 2 years we give to our employers test from new technologies to make sure that we are leaders on market.
                            <br /><br />
                            There is no excuse for fails. Our standards are so high that for us is every time the first rule quality.
                            <br /><br />
                            You can see in photogallery our references but they are more. Our company are in touch with partners like QINT, TSN-D or FinishLine...
                            <br /><br />
                            Come to our company take prospects to see if our portfolio fit to your vision and after that we can find the best way
                            how to realize it TOGETHER!
                            <br /><br />
                        </div>
                        <?php endif; ?>
                    </div>
                </div>

Answer 1

header 应该在你的容器里面并且给你容器固定的宽度

这是一个例子:

.container{ width:100%; max-width:500px; margin:0 auto; position:relative; background-color:yellow; padding-top:100px;}
.header{ width:100%; max-width:500px; margin-left:-250px; left:50%;  height:100px; background-color:red; position:fixed; top:0px; text-align:center;} 

<div class="container">
      <div class="header">Header</div>
        This is your container<br/>
        This is your container<br/>
        This is your container<br/>
        This is your container<br/>
        This is your container<br/>
        This is your container<br/>
    </div>