i have created a basic webpage, i have the main content centered, but I want to fill the white space either side of the content. http://hometown.net46.net/test.htmlthis is what I have. I want to fill the white space on the right and left. Note - the webpage is a flexible box.Here is my html:\[code\]<head> <link rel="stylesheet" href="http://stackoverflow.com/questions/15904192/main.css" /></head><body><div id="big_wrapper"> <nav id="top_menu"> <ul> <li><a href="http://stackoverflow.com/questions/15904192/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15904192/about.html">About us</a></li> <li><a href="http://stackoverflow.com/questions/15904192/posts.php">Posts</a></li> <li><a href="http://stackoverflow.com/questions/15904192/booking.php">Booking</a></li> <li><a href="http://stackoverflow.com/questions/15904192/contact.php">Contact us</a></li> </ul> </nav> <header id="top_header"> <h2>Image here</h2> </header> <div id="new_div"> <section id="main_section"> <article> <header id="welc"> <h2>Welcome to the lounge!</h2> </header> <p>The lounge is a youth group for 11 - 18 year olds. We are located in Eastbourne.</p> </article> <article> <header id="article2"> <h2>The lounge website created!!</h2> </header> <p>blahblahblahg.</p> </article> </section> <aside id="side_news"> <h4><u>News:</u></h4> <p>Lounge painting - 13th march</p> </aside> </div> <footer id="footer"> Hosted by <a href="http://joomla.com">Joomla</a> </footer></div></body>\[/code\]And my css:\[code\]*{ margin: 0px; padding:0px;}h2{ font:bold 20px tahoma;}h4{ font:bold 14px tahoma;}header, section, footer, aside, nav, article{ display:block;}body{ width:100%; display:-webkit-box; -webkit-box-pack: center;}#big_wrapper{ max-width: 1000px; margin: 20px 0px; display:-webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1;}#top_header{ background:yellow; border:3px solid black; padding:20px;}#top_menu{ border:red; background:#DBD7D9; border-radius:2px;}#top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 20px tahoma; height:30px;}#top_menu a{ color:black; text-decoration:none; }#top_menu li:hover{ background:yellow;}#new_div { display:-webkit-box; -webkit-box-orient:horizontol;}#main_section{ border:1px solid blue; -webkit-box-flex: 1; margin:20px; padding:20px;}#side_news{ border:1px solid red; width: 220px; margin: 20px 0px; padding: 30px; background: #66CCCC}#footer{ text-align:center; padding:20px; border-top: 2px solid green;}\[/code\]
fill right and left border
- Thread starter 7Sky
- Start date