I am having trouble aligning the menu bar and content side spaces. The issue is that the right side of the menu bar and content space doesn't have any side space. I would like to add some space to them similar to the left-hand side. Below, you'll find my CSS and HTML code:
body {
background-color: #7c8da2;
background-image: linear-gradient(#0b3262, #7c8da2);
}
#bannerPx {
padding: 0;
}
/* Banner Wrapper */
#banner {
position: relative;
top: 0;
/*background-image: linear-gradient(to right, #fff, #C8102E, #C8102E);*/
display: block;
/*float: left;*/
width: 250px;
height: 40px;
z-index: 10;
background-color: #f2fed1;
}
/* Banner Text */
#banner_text {
position: absolute;
text-aligh: center;
padding-left: 5%;
width: 60%;
height: 100%;
top: 45%;
/*right: 300px;*/
transform: translate(0, -50%);
/*padding: 10px;*/
font: bold 36px Century Gothic; /* Banner Text Font */
color: #000000; /* Banner Text Colour */
z-index: 11;
}
#banner_text2 {
position: absolute;
text-aligh: center;
padding-left: 65%;
width: 40%;
height: 100%;
top: 45%;
transform: translate(0, -50%);
font: bold 34px Century Gothic; /* Banner Text Font */
color: #00c000; /* Banner Text Colour */
z-index: 11;
}
#bannerimg {
height: 100%;
}
#bannerIncludePx {
height: 100%;
position: relative;
}
#content {
overflow: hidden;
z-index: 9999;
}
#content iframe {
margin: 35px 0px auto;
padding: 0;
width: 1917px;
height: 870px;
z-index: 300;
background-color: #7c8da2;
}
#console {
height: 150px;
margin-top: 0px;
overflow: auto;
}
#console iframe {
width: 100%;
z-index: 200;
}
nav {
margin: 0px 0px auto;
position: relative;
z-index: 2;
}
ul li img {
margin-left: -20px;
padding-right: 10px;
vertical-align: middle;
}
#ci_wrapper {
margin: 0 auto;
width: 1900px;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin: 0px auto;
...
......