CSS Script Compatibility - css

Question

I need to make my CSS Script Compatible with Mozilla and Google Chrome and also I need it to be full screen on a laptop and a desktop computer. Right now it is all over the place.Saw a few tips but I have no idea how to implement it. Hope someone can guide me along.
CSS SCRIPT
<style>
#logo{
background-image:url(logo.png);
width:180px;
height:150px;
}
#header{
background-color: rgb(37, 37, 48);
box-sizing: border-box;
color: rgb(49, 49, 49);
display: block;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height:auto;
line-height: 25.3968px;
min-height: 1px;
font-weight:100;
width:110%;
position:fixed;
margin-left:-1%;
margin-top:-1%;
z-index:10000;
}
button{
font-size: 12px;
line-height: 1;
display: inline-block;
text-transform: uppercase;
font-weight: bolder;
padding: 16px 18px;
background-color: #90ef7f;
color: #313131;
border: 0;
border-radius: 2px;
margin: 1px;
text-align: center;
}
button:hover{
background-color: #90ef7f;
color: #eeeaea;
}
#header h1,.demo h3{text-transform:none}
#header{border-bottom:2px inset #f6f6f6}
#header h1{text-align:left;color:#fff;margin:0 0 0 0}
h1{margin-bottom:1em}
a.btn.btn-theme{width:13%;color:#eeeaea;padding:5px;background- color:#34343e;border:1px solid #34343e;border-bottom:0;border-radius:0;font-weight:400;margin:0 10px 0 0}
a.btn.btn-theme:hover{color:#90ef7f}
a.btn.btn-theme.disabled{background-color:#f6f6f6;color:#313131;opacity:1}
.btn-group.theme{width:100%; font-size:16px;text-transform: uppercase;margin-top:-4%;}
#div {
width:220px;
height:100px;
text-transform:uppercase;
font-size:16px;
font-family:haveltica;
text-align:center;
font-weight:bold;
color:lightblue;
margin-top:10px;
}
h1{
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 35px;
line-height: 44px;
margin-bottom: 20px;
margin-right: 0px;
margin-top: 20px;
text-align: left;
text-transform: none;
width: 940px;
zoom: 1;
}
HTML Codes
<div id="header" class="hidden-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id ="logo"></div>
<div class="container" style = "margin-top:-10%;padding:2%"><h1>REPORT MODULE</h1>
<div id = "div" href="javascrit:void(0);">Welcome <?php echo $_SESSION['DIV_USERNAME']; echo '<br>';?>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="btn-group theme">
<?php
//creating menu
foreach((array)$profile_menu as $key=>$val)
{ ?>
<a class="btn btn-theme" href="<?php echo $key ?>"><?php echo $val ?></a>
<?php } ?>
$profile_menu = array(
'a.php'=>'a',
'b.php'=>'b',
'c.php'=>'c',
'd.php'=>'d',
'e.php'=>'e',
'f.php'=>'f',
'logout.php'=>'Logout'
);
?>
</div>
</div>
</div>
</div>
</div>

Answer 1

Not entirely sure what you are trying to do here, as you are using CSS name references that you have not included.
You CSS looks OK to me, but somewhat messy. I would suggest using the DOM explorer to look at each element that is not display correctly and make adjustments to its CSS reference block.