<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap margins</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="breadcrumb">
<h2 class="element-invisible">You are here</h2>
<ul>
<li class="breadcrumb-item breadcrumb-item-0 breadcrumb-home"><a href="/"><span>Home</span></a>
</li>
<li class="breadcrumb-item breadcrumb-item-1 breadcrumb-item-last"><a href="/all-paddle-layouts">All Paddle layouts</a>
</li>
</ul>
</div>
<h1 class="title" id="page-title">Make your window smaller to see the problem
</h1>
<a id="main-content"></a>
<div class="region region-content">
<div class="row">
<div class="landing-page-body col-md-9"></div>
</div>
<div id="block-system-main" class="block block-system">
<div class="content">
<div class="row paddle-layout-paddle_2_col_9_3_a">
<div class="col-xs-12 col-md-9 root-column">
<div class="row">
<div class="col-md-12 panel-region-nested-top">
<div data-pane-uuid="1c6701d4-ad20-4020-9218-edb92ad8a84f" class="panel-pane pane-node-content paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
<div class="node-3 node node-basic-page clearfix">
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even">
<p>
As you see there is a guttern (margin-left) applied to all columns. The problem is that when these columns are being given 100% width (so, .col-xs-12, .col-sm-12, .col-md-12 and .col-lg-12 classes) I want them to not have a margin-left thereby aligning perfectly with the left window/element/whatever.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-separator"></div>
<div data-pane-uuid="a1c7f9a9-03ac-4a25-97ac-a5e39625e0c2" class="panel-pane pane-add-image paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit et arcu a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec convallis diam ac risus ultrices, id pretium massa finibus.finibus ex aliquam, scelerisque magna. Praesent ac eros sagittis, vestibulum tortor nec, consectetur dolor.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-6 panel-region-nested-left">
<div data-pane-uuid="f5b65be8-6d78-485f-bc9e-1d1be31725f2" class="panel-pane pane-add-image paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
<img src="http://placehold.it/200x200"/>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 panel-region-nested-right">
<div data-pane-uuid="3e049106-74b3-4a1d-be21-0191b62bc525" class="panel-pane pane-add-image paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body special">
This element will have an unwanted left margin when the media query is activated and it gets the col-mg-12 width (100%).
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 panel-region-nested-bottom">
<div data-pane-uuid="659ca6e6-851b-4586-b1b4-2a454c6819ad" class="panel-pane pane-add-image paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit et arcu a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec convallis diam ac risus ultrices, id pretium massa finibus.
Nunc in luctus dui. Mauris eget efficitur justo. Praesent non nunc et felis fringilla ornare non vitae metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas id erat ullamcorper,
finibus ex aliquam, scelerisque magna. Praesent ac eros sagittis, vestibulum tortor nec, consectetur dolor. Nulla imperdiet est ut leo viverra, in mattis elit aliquam. In tortor velit, pharetra a erat eget, vehicula fringilla
justo. Curabitur scelerisque velit nec diam ullamcorper, a hendrerit nisl pharetra.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 root-column panel-region-right">
<div>
<div data-pane-uuid="4b394336-9627-4e7e-ba41-8b848b71f57e" class="panel-pane pane-simple-contact-form paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
<div class="node-6 node node-simple-contact-page clearfix">
<div class="content clearfix">
<div class="field field-name-field-paddle-contact-form field-type-simple-contact-form field-label-hidden">
<div class="field-items">
<div class="field-item even">
<form action="/delta" method="post" id="paddle-simple-contact-field-contact-form" accept-charset="UTF-8">
<div>
<div class="form-item form-type-textfield form-item-name">
<label for="edit-name">Name <span class="form-required" title="This field is required.">*</span>
</label>
<input type="text" id="edit-name" name="name" value="" size="60" maxlength="128" class="form-text required">
</div>
<div class="form-item form-type-textfield form-item-email">
<label for="edit-email">E-mail <span class="form-required" title="This field is required.">*</span>
</label>
<input type="text" id="edit-email" name="email" value="" size="60" maxlength="128" class="form-text required">
</div>
<div class="form-item form-type-textfield form-item-subject">
<label for="edit-subject">Subject <span class="form-required" title="This field is required.">*</span>
</label>
<input type="text" id="edit-subject" name="subject" value="" size="60" maxlength="128" class="form-text required">
</div>
<div class="form-item form-type-textarea form-item-body">
<label for="edit-body">Body <span class="form-required" title="This field is required.">*</span>
</label>
<div class="form-textarea-wrapper resizable textarea-processed resizable-textarea">
<textarea id="edit-body" name="body" cols="60" rows="10" class="form-textarea required"></textarea>
<div class="grippie"></div>
</div>
</div>
<input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit">
<input type="hidden" name="form_build_id" value="form-tMi0cgT_lzDQPxGhTv1N7yhR8R0xnq6AMtkof0GJmhM">
<input type="hidden" name="form_token" value="gCFvU9lVIXiK-gLlmue4z-sGzzHOTOzlmvDnEExdR8A">
<input type="hidden" name="form_id" value="paddle_simple_contact_field_contact_form">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-separator"></div>
<div data-pane-uuid="9fd6f45a-bd07-46ed-8e44-ecd8f6006790" class="panel-pane pane-organizational-unit paddle-color-palettes-subpalette-0">
<div class="pane-content">
<div class="pane-section-body">
<div class="paddle-oup paddle-oup-title">Organizational Unit</div>
<div class="paddle-oup paddle-oup-email">
<i class="fa fa-envelope valigntop"></i>
<a href="mailto:george.katsanos@kanooh.be">george.katsanos@kanooh.be</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
/* *
* @file
* Grids.
* */
/* @page elements for layout */
.row { width: 100%; *zoom: 1; }
.row:first-child [class*="col-"] { margin-top: 0; }
.row [class*="col-"] { margin-top: 10px; }
.region-content .row:first-child { margin-top: 0; }
.row:before, .row:after { display: table; line-height: 0; content: ""; }
.row:after { clear: both; }
.container-fluid:before, .container-fluid:after { display: table; line-height: 0; content: ""; }
.container-fluid:after { clear: both; }
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { margin-left: 0; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { position: relative; min-height: 1px; margin-left: 3.1518624641834%; *margin-left: 2.0744680851064%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 1px; border: 1px solid red;}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }
.row [class*="col-"]:first-child { margin-left: 0; }
.row .controls-row [class*="col-"] + [class*="col-"] { margin-left: 3.1518624641834%; }
.row .col-xs-12 { width: 100%; *width: 99.946808510638%; }
.row .col-xs-11 { width: 91.404011461318%; *width: 91.356255969437%; }
.row .col-xs-10 { width: 82.808022922636%; *width: 82.760267430755%; }
.row .col-xs-9 { width: 74.212034383954%; *width: 74.164278892073%; }
.row .col-xs-8 { width: 65.616045845272%; *width: 65.568290353391%; }
.row .col-xs-7 { width: 57.02005730659%; *width: 56.972301814709%; }
.row .col-xs-6 { width: 48.424068767908%; *width: 48.376313276027%; }
.row .col-xs-5 { width: 39.828080229226%; *width: 39.780324737345%; }
.row .col-xs-4 { width: 31.232091690544%; *width: 31.184336198663%; }
.row .col-xs-3 { width: 22.636103151862%; *width: 22.588347659981%; }
.row .col-xs-2 { width: 14.04011461318%; *width: 13.992359121299%; }
.row .col-xs-1 { width: 5.4441260744986%; *width: 5.396370582617%; }
.row .col-xs-offset-11 { margin-left: 97.659980897803%; *margin-left: 97.612225405922%; }
.row .col-xs-offset-10 { margin-left: 89.063992359121%; *margin-left: 89.01623686724%; }
.row .col-xs-offset-9 { margin-left: 80.468003820439%; *margin-left: 80.420248328558%; }
.row .col-xs-offset-8 { margin-left: 71.872015281757%; *margin-left: 71.824259789876%; }
.row .col-xs-offset-7 { margin-left: 63.276026743075%; *margin-left: 63.228271251194%; }
.row .col-xs-offset-6 { margin-left: 54.680038204393%; *margin-left: 54.632282712512%; }
.row .col-xs-offset-5 { margin-left: 46.084049665712%; *margin-left: 46.03629417383%; }
.row .col-xs-offset-4 { margin-left: 34.53125%; *margin-left: 34.4791666666667%; }
.row .col-xs-offset-3 { margin-left: 28.892072588348%; *margin-left: 28.844317096466%; }
.row .col-xs-offset-2 { margin-left: 20.296084049666%; *margin-left: 20.248328557784%; }
.row .col-xs-offset-1 { margin-left: 11.700095510984%; *margin-left: 11.652340019102%; }
.row .col-xs-offset-11:first-child { margin-left: 94.50811843362%; *margin-left: 94.460362941738%; }
.row .col-xs-offset-10:first-child { margin-left: 85.912129894938%; *margin-left: 85.864374403056%; }
.row .col-xs-offset-9:first-child { margin-left: 77.316141356256%; *margin-left: 77.268385864374%; }
.row .col-xs-offset-8:first-child { margin-left: 68.720152817574%; *margin-left: 68.672397325693%; }
.row .col-xs-offset-7:first-child { margin-left: 60.124164278892%; *margin-left: 60.076408787011%; }
.row .col-xs-offset-6:first-child { margin-left: 51.52817574021%; *margin-left: 51.480420248329%; }
.row .col-xs-offset-5:first-child { margin-left: 42.932187201528%; *margin-left: 42.884431709647%; }
.row .col-xs-offset-4:first-child { margin-left: 34.336198662846%; *margin-left: 34.288443170965%; }
.row .col-xs-offset-3:first-child { margin-left: 25.740210124164%; *margin-left: 25.692454632283%; }
.row .col-xs-offset-2:first-child { margin-left: 17.144221585482%; *margin-left: 17.096466093601%; }
.row .col-xs-offset-1:first-child { margin-left: 8.5482330468004%; *margin-left: 8.5004775549188%; }
@media (min-width:579px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
.row .col-sm-12 { width: 100%; *width: 99.946808510638%; }
.row .col-sm-11 { width: 91.404011461318%; *width: 91.356255969437%; }
.row .col-sm-10 { width: 82.808022922636%; *width: 82.760267430755%; }
.row .col-sm-9 { width: 74.212034383954%; *width: 74.164278892073%; }
.row .col-sm-8 { width: 65.616045845272%; *width: 65.568290353391%; }
.row .col-sm-7 { width: 57.02005730659%; *width: 56.972301814709%; }
.row .col-sm-6 { width: 48.424068767908%; *width: 48.376313276027%; }
.row .col-sm-5 { width: 39.828080229226%; *width: 39.780324737345%; }
.row .col-sm-4 { width: 31.232091690544%; *width: 31.184336198663%; }
.row .col-sm-3 { width: 22.636103151862%; *width: 22.588347659981%; }
.row .col-sm-2 { width: 14.04011461318%; *width: 13.992359121299%; }
.row .col-sm-1 { width: 5.4441260744986%; *width: 5.396370582617%; }
.row .col-sm-offset-11 { margin-left: 97.659980897803%; *margin-left: 97.612225405922%; }
.row .col-sm-offset-10 { margin-left: 89.063992359121%; *margin-left: 89.01623686724%; }
.row .col-sm-offset-9 { margin-left: 80.468003820439%; *margin-left: 80.420248328558%; }
.row .col-sm-offset-8 { margin-left: 71.872015281757%; *margin-left: 71.824259789876%; }
.row .col-sm-offset-7 { margin-left: 63.276026743075%; *margin-left: 63.228271251194%; }
.row .col-sm-offset-6 { margin-left: 54.680038204393%; *margin-left: 54.632282712512%; }
.row .col-sm-offset-5 { margin-left: 46.084049665712%; *margin-left: 46.03629417383%; }
.row .col-sm-offset-4 { margin-left: 34.53125%; *margin-left: 34.4791666666667%; }
.row .col-sm-offset-3 { margin-left: 28.892072588348%; *margin-left: 28.844317096466%; }
.row .col-sm-offset-2 { margin-left: 20.296084049666%; *margin-left: 20.248328557784%; }
.row .col-sm-offset-1 { margin-left: 11.700095510984%; *margin-left: 11.652340019102%; }
.row .col-sm-offset-11:first-child { margin-left: 94.50811843362%; *margin-left: 94.460362941738%; }
.row .col-sm-offset-10:first-child { margin-left: 85.912129894938%; *margin-left: 85.864374403056%; }
.row .col-sm-offset-9:first-child { margin-left: 77.316141356256%; *margin-left: 77.268385864374%; }
.row .col-sm-offset-8:first-child { margin-left: 68.720152817574%; *margin-left: 68.672397325693%; }
.row .col-sm-offset-7:first-child { margin-left: 60.124164278892%; *margin-left: 60.076408787011%; }
.row .col-sm-offset-6:first-child { margin-left: 51.52817574021%; *margin-left: 51.480420248329%; }
.row .col-sm-offset-5:first-child { margin-left: 42.932187201528%; *margin-left: 42.884431709647%; }
.row .col-sm-offset-4:first-child { margin-left: 34.336198662846%; *margin-left: 34.288443170965%; }
.row .col-sm-offset-3:first-child { margin-left: 25.740210124164%; *margin-left: 25.692454632283%; }
.row .col-sm-offset-2:first-child { margin-left: 17.144221585482%; *margin-left: 17.096466093601%; }
.row .col-sm-offset-1:first-child { margin-left: 8.5482330468004%; *margin-left: 8.5004775549188%; }
}
@media (min-width:889px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
.row .col-md-12 { width: 100%; *width: 99.946808510638%; margin-left: 0; }
.row .col-md-11 { width: 91.404011461318%; *width: 91.356255969437%; }
.row .col-md-10 { width: 82.808022922636%; *width: 82.760267430755%; }
.row .col-md-9 { width: 74.212034383954%; *width: 74.164278892073%; }
.row .col-md-8 { width: 65.616045845272%; *width: 65.568290353391%; }
.row .col-md-7 { width: 57.02005730659%; *width: 56.972301814709%; }
.row .col-md-6 { width: 48.424068767908%; *width: 48.376313276027%; }
.row .col-md-5 { width: 39.828080229226%; *width: 39.780324737345%; }
.row .col-md-4 { width: 31.232091690544%; *width: 31.184336198663%; }
.row .col-md-3 { width: 22.636103151862%; *width: 22.588347659981%; }
.row .col-md-2 { width: 14.04011461318%; *width: 13.992359121299%; }
.row .col-md-1 { width: 5.4441260744986%; *width: 5.396370582617%; }
.row .col-md-offset-11 { margin-left: 97.659980897803%; *margin-left: 97.612225405922%; }
.row .col-md-offset-10 { margin-left: 89.063992359121%; *margin-left: 89.01623686724%; }
.row .col-md-offset-9 { margin-left: 80.468003820439%; *margin-left: 80.420248328558%; }
.row .col-md-offset-8 { margin-left: 71.872015281757%; *margin-left: 71.824259789876%; }
.row .col-md-offset-7 { margin-left: 63.276026743075%; *margin-left: 63.228271251194%; }
.row .col-md-offset-6 { margin-left: 54.680038204393%; *margin-left: 54.632282712512%; }
.row .col-md-offset-5 { margin-left: 46.084049665712%; *margin-left: 46.03629417383%; }
.row .col-md-offset-4 { margin-left: 34.53125%; *margin-left: 34.4791666666667%; }
.row .col-md-offset-3 { margin-left: 28.892072588348%; *margin-left: 28.844317096466%; }
.row .col-md-offset-2 { margin-left: 20.296084049666%; *margin-left: 20.248328557784%; }
.row .col-md-offset-1 { margin-left: 11.700095510984%; *margin-left: 11.652340019102%; }
.row .col-md-offset-11:first-child { margin-left: 94.50811843362%; *margin-left: 94.460362941738%; }
.row .col-md-offset-10:first-child { margin-left: 85.912129894938%; *margin-left: 85.864374403056%; }
.row .col-md-offset-9:first-child { margin-left: 77.316141356256%; *margin-left: 77.268385864374%; }
.row .col-md-offset-8:first-child { margin-left: 68.720152817574%; *margin-left: 68.672397325693%; }
.row .col-md-offset-7:first-child { margin-left: 60.124164278892%; *margin-left: 60.076408787011%; }
.row .col-md-offset-6:first-child { margin-left: 51.52817574021%; *margin-left: 51.480420248329%; }
.row .col-md-offset-5:first-child { margin-left: 42.932187201528%; *margin-left: 42.884431709647%; }
.row .col-md-offset-4:first-child { margin-left: 34.336198662846%; *margin-left: 34.288443170965%; }
.row .col-md-offset-3:first-child { margin-left: 25.740210124164%; *margin-left: 25.692454632283%; }
.row .col-md-offset-2:first-child { margin-left: 17.144221585482%; *margin-left: 17.096466093601%; }
.row .col-md-offset-1:first-child { margin-left: 8.5482330468004%; *margin-left: 8.5004775549188%; }
}
@media (min-width:1170px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
.row .col-lg-12 { width: 100%; *width: 99.946808510638%; }
.row .col-lg-11 { width: 91.404011461318%; *width: 91.356255969437%; }
.row .col-lg-10 { width: 82.808022922636%; *width: 82.760267430755%; }
.row .col-lg-9 { width: 74.212034383954%; *width: 74.164278892073%; }
.row .col-lg-8 { width: 65.616045845272%; *width: 65.568290353391%; }
.row .col-lg-7 { width: 57.02005730659%; *width: 56.972301814709%; }
.row .col-lg-6 { width: 48.424068767908%; *width: 48.376313276027%; }
.row .col-lg-5 { width: 39.828080229226%; *width: 39.780324737345%; }
.row .col-lg-4 { width: 31.232091690544%; *width: 31.184336198663%; }
.row .col-lg-3 { width: 22.636103151862%; *width: 22.588347659981%; }
.row .col-lg-2 { width: 14.04011461318%; *width: 13.992359121299%; }
.row .col-lg-1 { width: 5.4441260744986%; *width: 5.396370582617%; }
.row .col-lg-offset-11 { margin-left: 97.659980897803%; *margin-left: 97.612225405922%; }
.row .col-lg-offset-10 { margin-left: 89.063992359121%; *margin-left: 89.01623686724%; }
.row .col-lg-offset-9 { margin-left: 80.468003820439%; *margin-left: 80.420248328558%; }
.row .col-lg-offset-8 { margin-left: 71.872015281757%; *margin-left: 71.824259789876%; }
.row .col-lg-offset-7 { margin-left: 63.276026743075%; *margin-left: 63.228271251194%; }
.row .col-lg-offset-6 { margin-left: 54.680038204393%; *margin-left: 54.632282712512%; }
.row .col-lg-offset-5 { margin-left: 46.084049665712%; *margin-left: 46.03629417383%; }
.row .col-lg-offset-4 { margin-left: 34.53125%; *margin-left: 34.4791666666667%; }
.row .col-lg-offset-3 { margin-left: 28.892072588348%; *margin-left: 28.844317096466%; }
.row .col-lg-offset-2 { margin-left: 20.296084049666%; *margin-left: 20.248328557784%; }
.row .col-lg-offset-1 { margin-left: 11.700095510984%; *margin-left: 11.652340019102%; }
.row .col-lg-offset-11:first-child { margin-left: 94.50811843362%; *margin-left: 94.460362941738%; }
.row .col-lg-offset-10:first-child { margin-left: 85.912129894938%; *margin-left: 85.864374403056%; }
.row .col-lg-offset-9:first-child { margin-left: 77.316141356256%; *margin-left: 77.268385864374%; }
.row .col-lg-offset-8:first-child { margin-left: 68.720152817574%; *margin-left: 68.672397325693%; }
.row .col-lg-offset-7:first-child { margin-left: 60.124164278892%; *margin-left: 60.076408787011%; }
.row .col-lg-offset-6:first-child { margin-left: 51.52817574021%; *margin-left: 51.480420248329%; }
.row .col-lg-offset-5:first-child { margin-left: 42.932187201528%; *margin-left: 42.884431709647%; }
.row .col-lg-offset-4:first-child { margin-left: 34.336198662846%; *margin-left: 34.288443170965%; }
.row .col-lg-offset-3:first-child { margin-left: 25.740210124164%; *margin-left: 25.692454632283%; }
.row .col-lg-offset-2:first-child { margin-left: 17.144221585482%; *margin-left: 17.096466093601%; }
.row .col-lg-offset-1:first-child { margin-left: 8.5482330468004%; *margin-left: 8.5004775549188%; }
}
.special {border: 2px dotted black; background-color: black; color: #fff;}
img {max-width: 100%;}