CSS -- removing some extra padding

Posted on 2014-02-05
Last Modified: 2014-02-05
Hi friends. I have another CSS question.

On this page here:

there is about 20px of padding on either side of the main content area. I need to get rid of that padding, extending the white content column to the left; the orange sidebar, to the right.

When I edit the width of classes col_8 and col_4, havoc and chaos result.

What am I missing? Thank you as always for your help.

<div class="col_8 main-content">

<h1>The Book</h1>
<p>In The Zero Marginal Cost Society, New York Times bestselling author Jeremy Rifkin argues that the capitalist era is passing&mdash;not quickly, but inevitably. The emerging Internet of Things is giving rise to a new economic system&mdash;the Collaborative Commons&mdash;that will transform our way of life.</p>
<p>In his provocative new book, The Zero Marginal Cost Society, Mr. Rifkin argues that the coming together of the Communication Internet with the fledgling Energy Internet and Logistics Internet in a seamless 21st century intelligent infrastructure&mdash;the Internet of Things&mdash;is boosting productivity to the point where the marginal cost of producing many goods and services is nearly zero, making them essentially free. The result is corporate profits are beginning to dry up, property rights are weakening, and the conventional mindset of scarcity is slowly giving way to the possibility of abundance. The zero marginal cost phenomenon is spawning a hybrid economy&mdash;part capitalist market and part Collaborative Commons&mdash;with far reaching implications for society.</p>
<p>Rifkin describes how hundreds of millions of people are already transferring parts of their economic lives from capitalist markets to what he calls the global &ldquo;Collaborative Commons.&rdquo; &ldquo;Prosumers&rdquo; are making and sharing their own information, entertainment, green energy, and 3-D printed products at near zero marginal cost. They are also sharing cars, homes, clothes and other items via social media sites, rentals, redistribution clubs, and cooperatives at low or near zero marginal cost. Students are even enrolling in free massive open online courses (MOOCs) that operate at near zero marginal cost. And young social entrepreneurs are establishing ecologically sensitive businesses using crowdfunding as well as creating alternative currencies in the new sharing economy. In this new world, social capital is as important as finance capital, access trumps ownership, cooperation supersedes competition, and &ldquo;exchange value&rdquo; in the capitalist marketplace is increasingly replaced by &ldquo;sharable value&rdquo; on the Collaborative Commons.</p>
<p>Rifkin concludes that while capitalism will be with us for the foreseeable future, albeit in an increasingly diminished role, it will not be the dominant economic paradigm by the second half of the 21st Century. We are, Rifkin says, entering a world beyond markets where we are learning how to live together in an increasingly interdependent global Collaborative Commons.</p> 


<div class="col_4 sidebar">

<p style="text-align: center;"><span style="font-size: 18pt;"><strong>Other Bestselling Books:</strong></span></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>The Third Industrial Revolution</strong><br />Palgrave Macmillan, 2011<br /><br /><em>New York Times best-seller!</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><br /><strong>The Empathic Civilization</strong><br />Tarcher, 2009</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="" alt="Euro Dream Cover" width="110" height="152" /></em></p>
<p style="text-align: center;"><em><strong>The European Dream</strong><br />Tarcher/Penguin, 2004</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="" alt="Hydrogen Economy" width="110" height="152" /></em></p>
<p style="text-align: center;"><em><strong>The Hydrogen Economy</strong><br />Tarcher/Putnam, 2002</em></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><em><img src="" alt="Age of Access" width="110" height="152" /></em></p>
<p style="text-align: center;">&nbsp;<strong>The Age of Access</strong><br />Tarcher/Putnam, 2000</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><img src="" alt="Biotech Century " width="110" height="152" /></p>
<p style="text-align: center;"><strong>The Biotech Century</strong><br />Tarcher/Putnam, 1998</p> 


Open in new window

.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

Open in new window

Question by:Eric Bourland

Accepted Solution

Adrian Crabtree earned 500 total points
ID: 39837779
Hi Eric, are you referring to the dark border that is to the right and left of the content? If that is what you are talking about, in order to remove that you can do the following:

Add a 0 the margin-left to .col_8, and the margin-right to .col_4. These margins are both set to 2%. Because you are removing essentially 4% off of the width of the two columns combined, you are going to want to add that to the width of .col_8. The CSS would look like this:

.col_8 {
  margin-top: -94px;
  margin-left: 0; /* This has changed from the original */
  margin-right: 0;
  margin-bottom: 0;
  width: 70%; /* This has changed from the original */
  background-color: #fff;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 10%;
  padding-right: 10%;
.col_4 {
  margin-top: -94px;
  margin-right: 0; /* Only thing that has changed */
  margin-bottom: 0;
  margin-left: 0;
  width: 30%;
  background-color: #f39c22;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;

Open in new window

I hope this help.

Author Closing Comment

by:Eric Bourland
ID: 39837781
Adrian, I see what you did, and that worked like a charm. Thanks very much. Have a great evening. Take care.


Featured Post

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS to create a button that has inward arrows at both ends 1 28
AdminLTE with wordpress 15 64
Change Background Color of Website 5 17
Hide Table in merge 3 10
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question