Html 浮动徽标与顶部菜单对齐

我试图创建一个标题，其中我有一个在屏幕左上角的标志。在徽标的右侧，并与底部对齐，我想放一个顶部菜单。我没有使用任何CSS框架，所有的HTML和CSS代码都在这里

我无法使菜单与徽标底部对齐（该徽标具有

浮动：左；

）。此外，在所有元素上使用边框（

border:1px solid；

）成功测试边距设置后，在我删除边框的那一刻，所有内容都会重新排列，我必须添加

填充：1px以便将它们保持在原位

有人可以看一下并建议我有关CSS的正确应用吗

编辑：

请注意，代码确实有效。我的问题是，这是一种黑客行为（本质上是添加不存在的填充物来完成工作）。
我建议您做的是绝对定位徽标和导航容器，然后设置每个元素的位置和大小以适合。这种IMHAO比浮动头元素更健壮、更可靠

css中的ie：

标题{
宽度：100%；高度：xpx；
position:relative；/*这使得内部元素相对于容器具有position:absolute动作，在需要移动容器时非常有用*/
顶部：0；左侧：0；
}
#标志{
背景：blah；宽度：xpx；高度：xpx；
位置：绝对位置；
顶部：0px；左侧：0px；
}
导航{
宽度：xpx；高度：xpx；
位置：绝对位置；
顶部：0px；左侧：[页眉宽度+一些填充]px；
}

当然，如果需要的话，你可以用零来填充。
你应该用HTML和CSS创建一个JSFIDLE（），来说明你的问题。为什么你希望我编译.scss只是为了看看你的问题是什么？我为你做了一个JS提琴：，现在你在干什么？@Miszy:我写了我的Sass代码，这样在CSS方面比我优秀的ppl就可以看到我是否在代码中犯了错误。@MatthewDarnell:谢谢你的JSFIDLE。我的观点不是它不起作用。我不得不通过添加一个基本上不存在的填充物来添加一个变通方法，以使其正确对齐。我花了一段时间才意识到您为什么推荐这种方法。我离开了它，然后在我做了一些其他事情之后又回来了，这是有意义的。谢谢你的帮助。休息对我总是有帮助的。令人惊叹的！