Removing Space at The Top Left and Right of Div

Removing space at the top left and right of div

You need to reset both the default padding and margin attributes in your stylesheet:

html, body {
    margin: 0;
    padding: 0;
}

As @Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.

It also looks like you're missing a semi-colon in your css, it should look as follows:

.top
{
    background-color:#3B5998;
    margin-left:0px;
    margin-top:0px;
}

How to get rid of white space on left and right of div?

Reset your CSS by adding

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

Usually a CSS reset of such default styles is applied to the document so you can start with a clean slate. Here is some great info on the subject of resetting your CSS stylesheets.

html,body {  margin: 0;  padding: 0;  width: 100%;  height: 100%;}#header {  background-color: RGB(57, 89, 100);  Height: 75px;  left: 0;  top: 0;  position: absolute;  width: 100%;}
#subHead {  background-color: RGB(39, 39, 39);  height: 100px;  padding: 0px;  margin: 0px;  height: 350px;}

<div id="header">  <h1>‍</h1></div>
<div id="subHead">  <h1>‍</h1></div>

How to remove unwanted space in html top, top left and right?

The body element has a default margin. Just set the body margin to 0 and your all set.

A "CSS RESET" is way overkill and should not be required.

body{  margin:0;}

<html>  <head>    <title>Lord Machine Admin</title>  </head>  <body>    <table width="100%" height="100%" bgcolor="Blue" border="1" cellpadding="0">      <tr height="100px">        <td>        </td>      </tr>    </table>  </body></html>

Remove additional space in the div containing the list

If you only want to remove the red spaces that are added on top and bottom of your list, just simply add margin:0; to the #preference

#preference {
margin: 0;
background-color: white;
}

How to remove space on right side of div?

You should only use columns within your rows, and the columns are based on a 12 column grid. You currently have 10 columns worth of width taken up using 2 .col-5 column and you also have a pixel for the divider that is stuck into the row in the codepen even though your example here doesn't show it.

How about doing two .col-6 columns and having the divider be a left border on the right column?

https://codepen.io/anon/pen/xaeWGB

<div class="left">
    <hr class="container hline">
    <div id="main" class="container border">
        <div class="row">
            <div class="col-lg-6 top">
            </div>
            <div class="col-lg-6 divider top">
            </div>
       </div>
   </div>
</div>

Remove white gap spaces in the left and right sides

I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            foo, bar, foobar 
        </div>
    </div>
</div>

As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).

CodePen

How to remove whitespace that appears after relative positioning an element with CSS

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext {    width:400px;    background:yellow;    border: 1px dashed red;    margin:50px;    padding:5px;    font-weight:bold;}.whiteblob{    position:relative;    top:-140px;    left:70px;    width:200px;    height:50px;    margin-bottom:-50px;    border: 4px solid green;    background:white;    font-size:2.5em;    color:red;    }.footerallowedwhitespaceinblue{    height:10px;    background-color:blue;}.footer{    background-color:grey;    height:200px;}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script></div><div class="whiteblob">     buy this!</div><div class="footerallowedwhitespaceinblue"></div><div class="footer"></div>

Removing Space at The Top Left and Right of Div