I'm having trouble getting a div to take the width of the entire screen

No matter what I try, there is still a visible margin between the div and the top/right/left of the screen.

<!DOCTYPE html>
<html>
<head>
    <title>Test2</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>

    <div class="container-fluid" id="topBackground">
        <h1>first</h1>
    </div>

</body>
</html>

CSS:

#topBackground{
background-color:#310048;
height:500px;
float:auto;
margin:0 auto;
max-width:100%;
}

1 answer

  • answered 2018-01-11 20:21 bzzzzzz

    Header has default margin so you have to remove it and also set body margin: 0 auto;

    body{
        margin: 0 auto;
    
    }
    #topBackground{
      padding:0;
    background-color:#310048;
    height:500px;
    float:auto;
    margin:0 auto;
    max-width:100%;
    }
    h1{
      margin:0;
    }
    

    https://jsfiddle.net/rghhwrm5/