Hey pals I have been facing a major problem as an armature in web design. OK i have this http://www.media101.xyz site and the width is just uncontrollable. i tried it on my phone before it was well but after editing for a while its now unresponsive i think am worsening my code… I have been trying to check online for references but it only gets worse please help me out. I would like my website to be responsive and at least center it self with a fixed width 980px
just a sample page
my css
body,html {
margin: 0 auto ;
float: none ;
}
.imgleft {
float : left;
margin-right : 25px;
}
.bold {
font-weight : bold;
color : black;
text-align : center;
margin-top : 0;
text-decoration : none;
font-family : “times new roman”;
text-transform : capitalize;
}
#wrap{
width:980px;
margin:0 auto;
}
.updates {
border : none;
padding : 10px;
width : 200px;
text-align : center;
background-color : crimson;
opacity : 1;
margin-left : 400px;
border-radius : 20px;
color : black;
font-size : 30px;
}
em {
font-style : italic;
}
.center {
text-align : center;
font-size : 120%;
}
.right {
text-align : right;
}
.nostart {
list-style-type : none;
margin : 0;
padding : 0;
}
.clear {
clear : both;
}
#top {
height : 35px;
width : 100%;
background-color : crimson;
padding-left : 10px;
position : fixed;
z-index : 12;
margin-top : 125px;
border-radius : 15px;
}
#top2 {
height : 35px;
width : 100%;
background-color : crimson;
padding-left : 20px;
position : absolute;
z-index : 12;
border-radius : 15px;
margin-top : 10px;
margin-bottom : 10px;
}
#novosti {
float : left;
width : 480px;
border : none;
padding : 10px;
margin-left : 5px;
margin-right : 15px;
margin-top : 3px;
background-color : azure;
}
.advert_txt {
text-align : center;
margin-top : 20px;
font-family : sans-serif;
text-decoration : none;
}
.adscroll {
margin-bottom : 10px;
background-color : #F0FFFF;
border : #ffffff solid 2px;
padding : 5px;
}
ul.ad {
list-style-type : none;
margin : 0;
padding : 0 0 0 0;
}
ul.ad li {
clear : left;
min-height : auto;
padding-top : 10px;
padding-right : 0;
padding-bottom : 10px;
padding-left : 0;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #FFF;
}
-
ul.ad li {
height : 70px;
}
.ad li a {
float : right;
margin-right : 10px;
padding-top : 1px;
padding-right : 10px;
padding-bottom : 1px;
padding-left : 10px;
margin-top : 2px;
margin-bottom : 2px;
text-decoration : underline;
color : crimson;
}
.ad li a:hover {
border : crimson solid 2px;
color : red;
background-color : white;
text-decoration : none;
}
.ads_125 {
display : inline-block;
width : 370px;
height : 370px;
text-align : center;
margin-top : 30px;
}
div.rows div.row {
width : 50%;
}
div.rows div.column {
float : left;
width : 50%;
}
.w-70-percent {
width : 70%;
}
.w-30-percent {
width : 30%;
}
.sidebar_box {
float : left;
height : 100%;
display : inline-block;
margin-left : 10px;
width : 470px;
margin-top : 5px;
}
.col {
margin-right : 2px;
margin-left : 0;
width : auto;
height : 500px;
}
.cleaner {
clear : both;
width : 50%;
height : 0;
font-size : 0;
}
#templatemo_footer_wrapper {
width : auto;
background : #339900;
border-radius : 30px;
}
#templatemo_footer {
width : auto;
padding : 20px 70px;
margin : 0 auto;
color : #F08080;
}
#templatemo_footer a {
font-family : “times new roman”;
color : #F8F8FF;
font-weight : bold;
}
#templatemo_footer a:hover {
font-family : “times new roman”;
color : #000000;
text-decoration : underline;
font-weight : bold;
}
#templatemo_footer h4 {
color : #F0F8FF;
font-family : “times new roman”;
}
.footer_box {
float : left;
padding-right : 24px;
margin-right : 25px;
border-right : 1px solid #131313;
}
.col_w160 {
width : 160px;
}
.col_w260 {
width : 240px;
}
.col_300 {
width : 300px;
}
.fb_last {
margin : 0;
padding : 0;
border : 0;
}
.footer_menu {
margin : 20px 0;
padding : 0;
list-style : none;
font-size : 13px;
}
.footer_menu li {
margin : 0 0 10px;
padding : 0 0 5px 25px;
line-height : 1em;
}
.footer_menu li a {
color : #ffffff;
text-decoration : none;
}
.footer_menu li a:hover {
color : #F0F8FF;
text-decoration : none;
}
#templatemo_copyright {
width : auto;
padding : 15px 40px;
margin : 5px auto;
color : #ccc;
background : black;
text-align : center;
font-family : “time new roman”;
border-radius : 30px;
text-transform : capitalize;
font-size : 15px;
}
h1 {
font-size : 30px;
font-weight : normal;
margin : 0 0 20px 0;
}
h2 {
font-size : 20px;
font-weight : normal;
margin : 20px 20px;
padding : 10px 15px;
}
h3 {
font-size : 24px;
font-weight : normal;
margin : 0 0 15px 0;
padding : 0;
padding : 0 0 10px 0;
}
h4 {
font-size : 18px;
font-weight : normal;
line-height : 25px;
margin : 0 0 20px 0;
padding : 10px 10px 0;
}
h5 {
font-size : 14px;
margin : 0 0 1px 0;
padding : 0;
}
h6 {
font-size : 14px;
margin : 0 0 5px 0;
padding : 0;
}
.mwili {
width : auto;
height : auto;
padding : 5px;
background-color : azure;
}
#adhome {
width : 100%;
height : auto;
margin-top : 100px;
}
.stories {
width : 30%;
height : auto;
text-indent : 10px;
text-align : center;
display : inline-block;
align-content : center;
padding : 5px;
margin-left : 20px;
align-content : center;
float : left;
position : relative;
}
.storyhead a {
margin-top : 35px;
margin-bottom : 5px;
text-align : center;
font-size : 30px;
text-transform : capitalize;
font-weight : bold;
}
.storyhead a:hover {
margin-top : 35px;
margin-bottom : 5px;
text-align : center;
color : crimson;
text-transform : uppercase;
}
table {
width : 100%;
height : auto;
}
table td .stories {
align-self : center;
margin : 10px 10px;
}
div .stories a {
color : black;
padding : 3px 3px;
}
.stories img {
border : none;
border-radius : 10px;
}
button {
background-color : crimson;
border-radius : 15px;
width : auto;
height : auto;
padding : 5px;
border : black solid 2px;
}
button:hover {
color : white;
border-radius : 20px;
width : auto;
height : auto;
padding : 5px;
}
div .stories a {
color : black;
font-family : “times new roman”, Helvetica, Arial, sans-serif;
}
div .stories a:hover {
color : green;
padding : 3px 3px;
text-decoration : none;
text-transform : lowercase;
}
.bannertips {
width : 100%;
height : 100px;
margin-top: 0px;
}
.headings {
font-size : 200%;
text-transform : uppercase;
text-decoration : none;
margin : 10px;
text-align : center;
font-family : “sans-serif”;
color : #008000;
}
.music2parts button {
border-radius : 20px;
background-color : black;
font-weight : normal;
float : right;
color : white;
margin-left : 20px;
margin-bottom : 10px;
margin-top : 10px;
}
.logo {
position : fixed;
width : 100%;
height : 135px;
z-index : 11;
display : block;
margin : 0 0;
border-radius : 20px;
}
.mixtapes {
width : 600px;
float : right;
margin-top : 200px;
}