Hi there, My url is http://www.skincarequeries.com/ I want to reduce the left and right margins and white space at both ends (left and right) Where to edit in the Following css code? Author URI: http://www.Template-Help.com/ */ /* CSS Document */ body{ padding:0; margin:0; background:#FFFFFF; width:100%; vertical-align:top; font-family: tahoma; color:#44464A; line-height:14px; font-size:11px; } .dt { width:100%; display:table; text-align:left; } .dr { width:100%; display:table-row; } .dc { vertical-align:top; display:table-cell; width:100%; } form, div, input, textarea { margin:0; padding:0;} input, textarea {font-size:1.01em;} input {vertical-align:top;} .postmetadataalt { font-size:0.81em; } .pagetitle {font-size:1.01em; color:#272727; font-weight:bold; text-transform:uppercase; padding:10px 16px 0px 16px;} p { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; } a {color:#44464A;} a:hover {text-decoration:none;} #respond {font-size:1.01em; color:#272727; font-weight:bold; text-transform:uppercase;} #links_with_style { vertical-align:top; } #archives { vertical-align:top; } #meta { vertical-align:top; } #recent-comments { vertical-align:top; } #recent-posts { vertical-align:top; } #categories { vertical-align:top; } #calendar_wrap { vertical-align:top; font-size:1.01em; padding:10px 0px 0px 23px; } #calendar { vertical-align:top; } #calendar_wrap a { text-decoration:underline; font-weight:bold; } #calendar_wrap a:hover { text-decoration:none; font-weight:bold; } #google-search { vertical-align:top; } #gsearch { text-align:left; } #pages { vertical-align:top; } #text-1 { vertical-align:top; } .textwidget { text-align:left; padding:10px 10px 0px 10px; font-size:1.01em; } #delicious { vertical-align:top; } #delicious-box { text-align:left; } .spacer {font-size:0px; line-height:0px;} .navigation {padding:10px 0px 10px 0px; display:table; width:100%;} .alignleft {width:40%; float:left; color:#000000; padding-left:18px;} .alignright {width:40%; float:right; text-align:right; color:#000000; padding-right:18px;} .alignleft a {color:#000000; font-size:1.01em; font-weight:bold;} .alignright a {color:#000000; font-size:1.01em; font-weight:bold;} .statusbar p {padding:5px 10px 15px 5px; font-weight:normal;} h1, h2, h3 {margin:0px; padding:0px;} h3 {font-size:1.01em; color:#272727; font-weight:bold; text-transform:uppercase;} h1 {font-size:2.96em; font-family:arial; text-transform:uppercase; line-height:1.21em; font-weight:normal; letter-spacing:-1px; color:#72993B; padding:24px 0px 0px 24px;} h1 a{color:#72993B; text-decoration:none;} .slogan {color:#3A3A33; font-weight:bold; font-size:0.91em; padding-left:27px;} .main {width:766px; text-align:left;} .cont {background:url(images/bg.gif) top left;} .cont_cen {background:url(images/bg_cen.gif) left repeat-y;} .cont_bot {background:url(images/bg_bot.gif) left bottom no-repeat;} .cont_top {background:url(images/bg_top.gif) left top no-repeat;} .left {margin:0px 20px 0px 17px; color:#272727;} .left a {color:#272727;} .right {margin:0px 13px 0px 10px; color:#272727;} .right a {color:#272727;} .left .widget {padding-bottom:16px;} .left .widget h2 {background:url(images/ic_widget.gif) top left no-repeat; color:#72993B; font-size:1.01em; font-weight:bold; padding:0px 15px 0px 21px;} .left .widget ul {margin:5px 14px 0px 5px; padding:0px; list-style:none; line-height:18px;} .left .widget ul li {padding-left:16px; background:url(images/arrow_2.gif) top left no-repeat;} .left .widget ul li a {color:#272727; text-decoration:none;} .left .widget ul li a:hover {text-decoration:underline;} #categories ul {margin:5px 14px 0px 5px; padding:0px; list-style:none; line-height:24px;} .right .widget {padding-bottom:20px;} .right .widget .h2 {background:#72993B url(images/w_bot.gif) bottom left no-repeat; width:160px;} .right .widget h2 {background:url(images/w_top.gif) top left no-repeat; color:#FFFFFF; font-size:1.01em; font-weight:bold; padding:10px 13px 10px 14px;} .right .widget ul {margin:12px 14px 0px 14px; padding:0px; list-style:none; line-height:18px;} .right .widget ul li {padding-left:11px; background:url(images/arrow_1.gif) top left no-repeat;} .right .widget ul li a {color:#272727;} #links_with_style ul {margin:0px; padding:0px; list-style:none; line-height:1.01em;} #links_with_style ul li {padding:0px; background:none;} #links_with_style ul li ul {margin:12px 14px 0px 14px; padding:0px; list-style:none; line-height:18px;} #links_with_style ul li ul li {padding-left:11px; background:url(images/arrow_1.gif) top left no-repeat;} .w_search {padding:18px 6px 0px 0px; text-align:right;} .w_search .input {width:134px; height:14px; margin-bottom:15px;} .search {padding-top:10px;} .search .input {width:275px; height:14px; margin-right:5px;} .content {padding:6px 0px 15px 0px;} .content .topic {background:#72993B url(images/topic_b.gif) bottom left no-repeat;} .content .topic_t {background:url(images/topic_t.gif) top left no-repeat; padding:10px 0px 10px 0px; width:100%;} .content h2 {font-size:1.01em; color:#FFFFFF; font-weight:bold; text-transform:uppercase; padding:0px 16px 0px 16px;} .content h2 a {color:#FFFFFF; text-decoration:none;} .content h2 a:hover {text-decoration:underline;} .content .author {padding:0px 16px 0px 16px; color:#161515;} .content .author a {color:#161515; text-decoration:none;} .content .author a:hover {text-decoration:underline;} .content .date {padding:7px 13px 0px 0px; font-weight:bold; color:#A7EC45; text-align:right;} .content .text {padding:19px 13px 0px 16px; text-align:justify;} .content .text img {float:left; margin-right:16px;} .content .comment {padding:14px 14px 0px 16px; color:#72993B; text-align:right;} .content .comment a {color:#72993B; font-weight:bold;} .footer {padding:23px 0px 23px 10px;} .blog {color:#595959;} .blog a {color:#595959;} HTML: Regards bushib
If you are referring to the navigation text box: .navigation {padding:10px 0px 10px 0px; display:table; width:100%;} Just reduce the padding px. If you are referring to your entire page .main {width:766px; text-align:left;} <-- This line has made your site vary narrow. Change to percentage, and test to the way you like.
If you want to reduce lateral margins you'll have to make the content wider (width in .main class). You can specify a fixed width (i.e. width: 1000px) or a percentage (i.e. width: 90%).
Hi there, I changed this line .main {width:766px; text-align:left;} to different percentages instead of pixels but the alignment of the whole page is scattered. Any help how can I reduce/lessen the left right white space of the whole page? Regards bushib