How to get rid of horizontal whitespace between divs?

Question

I can't for the life of me get rid of the horizontal white space between two divs. I am using twitter bootstrap and the white space issue can be seen at http://www.areyoumoving.com.au between the hero image and the footer.

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

I ran your page through a hex viewer. It is certainly a Byte Order Mark (BOM) before the footer which means your footer file has these chars in the beginning:

%3C%2Fdiv%3E%0A%EF%BB%BF%3Cfooter

enter image description here

Here are many ways to remove it - not just AWK

Using awk to remove the Byte-order mark

PS: Why would I use a Unicode Signature Byte-Order-Mark (BOM)?

edited May 23 '17 at 11:43

Community

1
1

answered Apr 27 '15 at 06:38

mplungjan

169,008
28
173
236

Yeah, how do I remove it? – Mick Sherry Apr 27 '15 at 06:40
Thanks for the advice. I had never heard of the BOM before, I use Sublime Text 3 so I re-opened and saved my files with UTF8 encoding without the BOM – Mick Sherry Apr 27 '15 at 07:14
Yeah, it is very annoying and surprising. One of those things to never forget :) – mplungjan Apr 27 '15 at 07:15

score 0 · Answer 2 · answered Apr 27 '15 at 06:36

0

I assume that you are using some "col-lg/md/sm/xs" classes from bootstrap... these classes have a pre-defined margin / padding into their styles.

Just override these properties to get rid of them, add these lines in your css file :

#yourIdentifier{
    margin:0; //or top/left/right/whatever
}
#yourIdentifier{
    padding:0; //whatever ;)
}

You may sometimes have to add "!important" tag (end of css line) to be sure your edits are really taken into account.

answered Apr 27 '15 at 06:36

Julo0sS

2,096
5
28
52

I am using those classes, however upon inspecting the problem it isn't showing up like a margin or padding problem. There are 2 random quotation marks appearing in the markup after it is rendered – Mick Sherry Apr 27 '15 at 06:39
these random quotations come from the fact that you're using ::before & ::after properties. The style of these "pre-defined" before/after just look like setting the content to ""... – Julo0sS Apr 27 '15 at 06:45

score 0 · Answer 3 · answered Apr 27 '15 at 06:39

0

There is any trash before <footer>, probably BOM (if you include footer from the single file).

Remove BOM, save the file again and it will be okay.

answered Apr 27 '15 at 06:39

pavel

26,538
10
45
61

How to get rid of horizontal whitespace between divs?

3 Answers3