Container overlapping to header - css

Question

I have a problem with my container, it actually overlapping to the header, how do I adjust it in css? It should be under the header with a little margin between header and the container.
see the screenshot here
#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

the header should be inside your container and give fixed width you container
here is an example:
.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>

Answer 2

I deppared myself with the same problem here and apparently, I solved it using the following sollution:
style="z-index: 1" for the navbar or header;
style="z-index: 0" for the container;
*Reminder: using the "style" inside your html script instead of a css folder linked to it is deprecated, it will work but its a better practice trying to avoid this.