CODEWITHSUNDEEP
cssbootstrap-4
Black
Black

Reputation: 20212

Bootstrap 4 - margin 0 does not work

I noticed that margin: 0px has no effect. If you look on the screenshot, then you can see that the margin is still there even though it was set to 0 for left and right.

enter image description here

First I checked if any other class or id is doing this, but it is not.

What is going on? I even tried it with !important but it made no difference.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.header {
    background: black;
    height: 60px;
    position: fixed;
    z-index: 1;
    width: 100%;
}

.footer {
    position: fixed;
    color: white;
    text-align: center;
    padding-top: 10px;
    background-color: black;
    width: 100%;
    bottom: 0px;
    padding-bottom: 10px; 
}

.main {
    overflow-y: scroll;
    padding-top: 120px;
    padding-bottom: 120px;
}

.content {
    position: relative;
    min-height: 100%;
}

.containerFooter {
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
}

.innerContainer {
    padding-left: 6%;
}

.carObject {
    display: inline-block;
    border: 2px solid #ffdbdb;
    width: 380px;
    height: 512px;
}

.imagesWrap {
    margin-top: 50px;
    min-height: 250px;
    min-width: 352px;
}

.image {
    /*width: 444px;*/
    height: 280px;
    margin:10px;
    padding-bottom:10px;
}

.car_image {
    display: inline;
    min-height: 400px;
}

.carObjectEdit {
    border: 2px solid #ffdbdb;
    min-width: 300px;
    width: 380px;
}

.carTitleContainer {
    font-family: fantasy;
    padding-top: 0px;
    padding-left: 0px;
    height: 24px;
    /*min-height:40px;*/
}

.close {
    position: absolute;
    margin-right:4px;
    margin-top:4px;

}
    .close:hover {
        color: red;
    }
.edit {
    position: absolute;
    margin-right:4px;
    margin-top:4px;
}
    .edit:hover {
        cursor:pointer;
        color: red;
    }

.carProperties {
    font-size: 12px !important;
    font-family: arial;
}

.detailsDescription {
    min-height: 100px;
    font-size: 12px !important;
    text-align: center;
    border: 1px #d8d8d8 solid;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

p.detailsDescription {
    margin-bottom: 0px;
}

table.details tr td {

    min-width: 80px;
    text-align: center;
}

table.details tr td:nth-child(odd) {
    font-weight: 600;
    text-align: right;
}

/* --------------Full Responsive Design--------------------*/
.FilterContainer{
    overflow-x:auto;
    margin-top: 150px;
    width: 740px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}
.createContainer {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:1600px) and (min-width:1200px) {
    .createContainer {
        width: 800px;
    }

}
@media (max-width:1200px) and (min-width:769x) {
    .createContainer {
        width: 400px;
    }

}
@media (max-width:769x) and (min-width:360px) {
    .createContainer {
        width: 270px;
    }

}
@media (max-width:360px) {
    .createContainer {
        width: 225px;
    }
}
/*-Login-----------------*/
.navbar-form {
    margin-right: 80px;
    transform: scale(0.85);
    padding-top: 4px;
}

@media (max-width:1850px) and (min-width:1600px) {
        
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 320px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        
    }
}

@media (max-width:1600px) and (min-width:1500px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 600px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1500px) and (min-width:1400px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 650px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1400px) and (min-width:1300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 675px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1300px) and (min-width:1200px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 750px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1200px) and (min-width:1100px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 800px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1100px) and (min-width:600px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1000px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1000px) and (min-width:800px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1080px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:800px) and (min-width:600px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 14px;
    }
}
@media (max-width:600px) and (min-width:300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 13px;
    }
}
@media (max-width:300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 12px;
    }
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/* ENDE --------------Full Responsive Design--------------------*/
/* ------------------ diverses ----------------------*/

.error {
    padding:10px;
    color: red;
}

.errorLog {
    color: red;
}

a.animatedLink {
  position: relative;
  text-decoration: none;
}

a.animatedLink:hover {
    text-decoration: none;
}

a.animatedLink:hover::after, a.animatedLink:focus::after {
  opacity: 1;
  transform: translateY(-4px);
}

a.animatedLink::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(8px);
}

/* ------------------ constantin --------------------*/

.ListContainer{
    margin-top: 120px;
    width: 850px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.DetailContainer{
    margin-top: 120px;
    width: 1200px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.KontaktContainer{
    margin-top: 40px;
    width: 850px;
    height: 550px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.InseratContainer{
    margin-top: 120px;
    width: 740px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.form-group{
    padding: 7px;
}

label{
    width: 150px;
}

select{
    width: 220px !important;
}

input{
    width: 220px !important;
}

.SubmitButton{
    padding-top: 20px;
    text-align:center;
}

button{
    font-size: 20px !important;
}

h3{
    text-align:center;
    margin-bottom:30px;
}

.Login{
    position: absolute;
    right: 7px;
}


.navbar-inverse{
    height: 60px;
}

.navbar-brand{
    position: absolute;
    left: 13px;
    top: 5px;
    font-size: 25px;
    color: white;
}
.navbar-brand:hover{
    color: red;
}

.Menu{
    position: absolute;
    left: 400px;
    top: 5px;
    font-size: 25px;
}

 /* The side navigation menu */
.sidenav {
    color: white;
    margin-top: 60px;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    background-color: #2d2d2d;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}


/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
    color: white;
    background-color: #2d2d2d;
    border: 1px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}



.MenuHide{
    transform: scale(0.5);
    padding-left:50px;
    position:absolute;
    top: -3px;
    right:15px;
    margin: 15px;
    z-index: 500;
}
    .MenuHide:hover{
        cursor: pointer;
    }

.btn{
    text-align: left;
}

.modal-dialog-reg{
    width: 268px !important;
}

.modal-dialog-anm{
    width: 505px !important;
}

.modal-footer{
    text-align: center;
}



.ListImg{
    width: 250px;
    height: 150px;
    margin-right: 25px;
}

.ListView{
    text-decoration: none;
}

.CarouselContainer{
    width: 600px;
    height: 400px;
}

.DetailImg{
    width: 600px;
    height: 380px;
}

.backendContainer {
    border:1px solid black;
}
.backendContainer img {
    height: 175px;
    border: none;
}

.deleteAreYouSure {
    width: 100%;
    margin: 4px;
}
.edit {
    width: 100%;
    margin: 4px;
}

.FooterButton{
    color: #d4d4d4;
    font-size: 20px;
    text-decoration: none;
    margin-left: 20px;
}

.FooterButton:hover{
    color: white;
}

.FooterTitle {
    margin: 0px;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Simple CMS"/>
<meta name="author" content="Sheikh Heera"/>

<title>LaraPress</title>

<body>
    <div class="header">
       <div class="container">
    <div class="row">

        <div class="col-lg-10">
            <a class="navbar-brand" href='http://localhost/-auto-shop/shop/public'>This is the header</a>
        </div>

        <div class="col-lg-1"></div>
            <div class="col-lg-1 MenuHide" onClick="openNav();" id="MenuHide">
                <img class="MenuHideIcon" src="http://localhost/-auto-shop/shop/public/img/menu.png">
            </div>
        </div>
</div> 
    </div>
    <div class="content">
        <div class="main">
            <div class="container m-0">
              <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                  <h2>Datenschutz</h2>
                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

                      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

                      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 

                      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 

                      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 

                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

                      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                            <!-- SideNav -->
                <div id="mySidenav" class="sidenav">
                    <button class="closebtn" onclick="closeNav()">
                        <i class="fa fa-window-close" aria-hidden="true"></i>
                    </button>
                        <a href="http://localhost/-auto-shop/shop/public/user/showAccount"><i class="fa fa-id-card"></i>&nbsp;Hans</a>

                    <a href='http://localhost/-auto-shop/shop/public/car/showAll'><i class="fa fa-th-list" aria-hidden="true"></i>&nbsp;Inserate</a>

                            <a href='http://localhost/-auto-shop/shop/public/car/create'><i class="fa fa-newspaper-o" aria-hidden="true"></i>&nbsp;Verkaufen</a>
                        <a href='http://localhost/-auto-shop/shop/public/logout'><i class="fa fa-sign-out" aria-hidden="true"></i> Abmelden</a>
                    </div>
                <!-- SideNav ENDE -->	
                </div>
              
              </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <h3 class="FooterTitle">&copy; 2017 </h3>

<div class="FooterButtonWrap">
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/impressum'>Impressum</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/datenschutz'>Datenschutz</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/haftungsausschluss'>Haftungsausschluss</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/agb'>AGB</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/kontakt'>Kontakt</a>
</div>    </div>

</body>

Jsfiddle

UPDATE:

It is related with the weird @media settings. I noticed that it works if I uncheck each one of them:

enter image description here

Why is Bootstrap 4 designed like this and how can I disable this "feature"?

EDIT: I "downgraded" to 3.3.7 again, no headache anymore...

Upvotes: 0

Views: 409

Answers (2)

tao
tao

Reputation: 90028

You're using .m-0, which applies margin:0!important; on .container, which uses left and right margin values of auto, combined with hard-coded widths, to be centered.

If you want your .container to fill the entire screen, use .container-fluid.

Ample note regarding use of .m-0 and the likes:

Unfortunately, Bootstrap chose a weird (if you ask me) way to develop a new system of imposing margins and paddings in v4. It's weird (and wrong, IMHO) because it is way too powerful in terms of specificity.
In short, it implies the use of !important for classes of type m-* and p-*. It also creates numerous problems when you need different margin/padding values applied responsively.
As far as I'm concerned, it's a mistake and I personally chose not to use this system at all, in any of my projects.

If you choose to use them, get used to using !important and at least one .className to apply your desired values over Bootstrap's selectors.

The obvious alternative is to not use .m-* and .p-* classes at all and apply margins and paddings as in previous versions of Bootstrap, without the need to use !important.

Note: Posting images of code is quite wrong (on SO), for several reasons:

  • it denies indexing, so people with a similar error won't be able to find it by searching the error (when you're posting an error)
  • most times, it's a lot easier and faster to understand a code if you see the result and inspect it, which is not possible when you post an image of code

Do consider replacing the images with the actual code or adding a Minimal, Complete, and Verifiable example in your question, featuring your issue.

Upvotes: 2

Naderio
Naderio

Reputation: 1419

Bootstrap4 uses flexbox. Try to set display: inline-flex - you can add the class: .d-inline-flex

Upvotes: 0

Related Questions