create left and right margin for a content box

I am probably confused about margins and padding…I want the blue box itself to be 8% indented from the left and right so is that a margin? The copy inside it can be just a comfortable padding so its not jammed up to the edge of the blue, maybe 10x or so.

No worries about late response…I was at WordCamp US in Philadelphia and just got back.

OK so I do mean margins. If you look here: http://www.dev-ep.cagraphicdesign.biz/services/team-exceleration/
you will see that the blue box with the text box inside it extends to the full width whereas all the other elements on the page align with the image at the top which has 8% padding left and right. I tried some other ways with a variety of layout and content boxes but to no avail. I am not an expert coder so I would not know how to implement css that would pertain to just that box.

What is the difference between assigning a class by doing the following here:
http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/.

and this:

I know very little about this so I am trying understand.

Also, stupid question but am I adding that css shown in your post to the custom css class area within that particular element or to the css area under General Styling.

Hi Ismael
I appreciate all your help but still don’t have it right. (I am giving you access to my site in the private content area in case you want to have a look. )
I got the custom css cIass field to show up (Yay!) and in the field box for the layout element is this:
cagd-indentbox
BUT did something wrong in the quick css in General Styling because ALL the elements on the entire site had an 8% margin. I just want the pale gray box and light blue box to have that 8% margin so they don’t stick out further than the other elements on that page that have 8% margin assigned in their “edit column”.
I deleted the css but this is what I had (this includes all my css):
body {
font-size: 15px;
}
#header_main .container, .main_menu ul:first-child > li a {
min-width: 76px;
}
#footer { padding-top: 23px; padding-bottom: 20px; }

/* Border Color */

.page-id-274 .av_toggle_section span{
border:1px solid #3d71a1!important;
}
#footer .widget {
margin: 0;
}
.home #av_section_1 .content {
top: -160px;
}
#top .scroll-down-link {
color: #cf0a2c !important;
font-size: 100px !important;
}
.av-fixed-rotator-width .av-rotator-text {
width: 100%!important;
text-align: center;
}
@media only screen and (max-width: 450px) {
.av-image-caption-overlay-center {
font-size: 28px !important;
}}
.cagd-indentbox { /* margin: 8% auto; /* }

I also tried only adding
.cagd-indentbox { margin: 8% auto; }

but that did not change anything. Am I supposed to add BOTH to the quick CSS in the General Styling section?

Thanks again for guiding me through this as I realize this is more help than you are obligated to give :-)

This is perfect! Thank you so much. With my rudimentary knowledge of coding I would have never guessed to apply it to the separator before the column.
Much appreciated Ismael.

Consider this ticket closed