Bootstrap 3 issue

Question

I am having some problems with Bootstrap 3

In my header I currently have 2 columns, both with a columns width of 6. I would like to add a column in between these two columns. But if i change the column to 4 and add a 4 column in between they appear on different lines. Is the following not the correct way to have 3 columns in a row in bootstrap 3?

<div class="row">
    <div class="col-md-4">
       // Content here
    </div>
    <div class="col-md-4">
       // Content here
    </div>
    <div class="col-md-4">
       // Content here
    </div>
</div>

Thee is a link to site where i am having the problems. The problem is in my header where my logo is

http://www.sevecu.dk/juni14/

Update: It works in Chrome and Safari but not in Firefox and Explorer

Answer 1

I was able to reproduce this opening it in IE. Your three columns are setup correctly.

What you'll notice is even if you delete the logo nodes through the debugger, the one of the three is always in the top-right corner. This led me to believe the alignment of something above it is uneven.

Specifically, it appears to be caused by the following in template.css :

p {
  margin: 0 0 10px;
}

Which is pushing the .customphone below the area defined in the white-row.

To resolve it, one way would be to do:

p {
  margin: 0;
}

Or probably change it to .customphone p or create its own class so you don't affect all p

This resolved the issue for me.