How to Remove Free Spaces Between Divs

Delete white space between divs

You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.

You have:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

Change for:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

However, this is a bad way to do what you want to do.

You should float the elements if thats what you want to do.

How to remove white space between div elements

h1, h2, p {
    margin: 0;
}

Browser adds margins on heading elements and paragraphs by default. You remove it via CSS.

How to remove an invisible space between div tags

I've finaly found the problem thanks to all of You but especialy thanks to Notepad++

The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.

I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.

How to remove space between div elements?

There is a gap because div is block element, if you want to remove the gap between div use display: inline-block to remove it.

body > div { display: inline-block; }

This will display an element as an inline-level block container. Please refer to CSS Display

How to remove space between divs?

try Reset CSS

demo

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

How can I remove white space between divs?

The <ul> element is part of the problem. You should add this style to it

.AMSI {
    margin-bottom: 0;
    padding-bottom: 0;
}

this by itself does not fix it. However, there is a stray <p></p> on the page, just after this <ul> element.

You should remove this <p> tag (assuming it's empty because you are not using it.)
This <p> tag has a margin-bottom of 1rem which is causing the white space

Remove Spacing Between Divs

Simple remove width: 600px from child in the middle

.playhouserentals {  background-size: cover;  background-image: url('http://via.placeholder.com/500x500');  height: 500px;}
.playhouserentals2 {  background-size: cover;  background-image: url('http://via.placeholder.com/500x500');  height: 500px;}
.playhousetitle {  font-weight: bold;  color: #605e5e;}
.playhouserentalssect {  /* width: 600px; --- remove this */  height: 500px;  display: flex;  margin: 0 auto;  align-items: center;  justify-content: center;  text-align: justify;  background-color: #dbdbdb;}
.playhouserentalscard {  width: 400px;  border: 1px solid #000;  -webkit-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);  -moz-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);  box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);  "
}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /><div class="w3-row w3-container">  <div class="w3-col l4 playhouserentals">  </div>  <div class="w3-col l4">    <div class="playhouserentalssect">      <div class="w3-padding-large w3-white playhouserentalscard">        <h2 class="cursive playhousetitle">Rentals</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, feugiat id tristique suscipit, tincidunt sit amet mauris. Duis eget velit in dolor fermentum placerat aliquet nec lacus. Morbi pulvinar magna placerat, rutrum massa a, eleifend          turpis.</p>        <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p>      </div>    </div>  </div>  <div class="w3-col l4 playhouserentals2">  </div></div>

.row {
    font-size: 0;
}

.item {
    font-size: 12px;
}

.row {  background-color: red;  margin: 2em 0;  display: block;  text-align: center;  white-space: nowrap;  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;  box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;  font-size: 0;}.item {  font-size: 12px;  background-color: silver;  width: 50%;  white-space: normal;  display: inline-block;}.sub-item {  background-color: royalblue;  margin: .5em;  width: 100px;  height: 100px;  text-align: center;  display: inline-block;}

<div class='row'>  <div class="item">    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>  </div>  <div class="item">    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>  </div></div>