Question

Here is what I’m trying to do:
I have a wrapper box .box-body and I want to change margin-left to 0 of all elements that are close to the left edge.

In my example on http://jsfiddle.net/8NXMq/6/ I want boxes with views.py and context_processors.py to have margin-left: 0, but the rest keep the same, I was thinking to create additional class and just override this property, but that’s not what I want to do, because I don’t know the number of boxes that i will have it could be 7, could be 20 …. plus if you resize the window number of box in one row will change.

here is css:

.box-body {
    background: #ddd;  
    width: 700px;
    height: 300px
}

.app-file {
    position: relative;
    float: left;
    margin: 10px 0 0 14px;
    display: inline-block;
    padding: 10px 18px 10px 18px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    background: rgba(255,255,255, 0.9);
    color: rgb(68,68,68);
}

Answer 1

You could just add a negative margin left to the box-body. Something like this: http://jsfiddle.net/8NXMq/7/

css:

.box-body {
    background: #ddd;  
    width: 714px;
    height: 300px;
    margin-left: -14px;
}

This will cause the entire body box to move 14px to the left. Since it is outside the viewport, this will not be visible. Note that i also added 14px to the width to keep the visible size of the box at 700px.