Помогите, header больше, чем нужно. Как уменьшить высоту или в чем проблема?

[Robel]

Погуглила про колоны и сетки, но ничего толком не нашла... 

Код:
 

<div class="wrap">
        <header id="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <button id="primary-nav-button" type="button">Menu</button>
                        <a href="index.html"><div class="logo">
                            <img src="img/logo5.jpeg" alt="Our Logo" style="width:320px;height:145px;>

                        </div></a>
                        <nav id="primary-nav" class="dropdown cf">
                            <ul class="dropdown menu">
                                <li><a href="Биография.html">Биография</a></li>
                                <li class='active'><a href="#">Для догволкеров</a></li>
                                <li><a href="#">Для владельцев собак</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
    </div>

Собственно проблема визуально:

[npofopr]

Откройте DevTools и происпектируйте элементы. Там всё сразу видно должно быть. 

[fooxy96]

Тут css не помешал бы, ведь поблема в стилях а не в блоках. Проблема думаю в неправильно написаных размерах или внешних или внутренних отступах. Пришлите пожалуйста html и css. Я посмотрю и помогу решить вам проблемку. Спасибо.

 

[npofopr]

Ещё лучше научиться пользоваться песочницами кода, по типу http://jsfiddle.net/