html - 正确设置徽标大小+删除填充

我使用的主题是自动调整我的标志到一定的大小。我试图通过在width: 100%;元素中添加.header .logo {来编辑css文件，如下代码所示：

Header
*/
.header_container {
  min-height: 40px;
}

.header {
  height: auto;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  background: #fff;
}
.header .header_top {
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  direction: ltr;
  background: #f6f6f6;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top {
    padding: 10px 15px;
  }
}
.header .header_top > .row > .columns {
  padding: 0;
  min-height: 1px;
  height: 70px;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top > .row > .columns {
    padding: 0 0.9375em;
  }
}
.header .logo {
  display: table;
  min-height: 1px;
    width: 100%;
}
.header .logo .logolink {
  display: table-cell;
  vertical-align: middle;
  max-width: 100%;
}
.header .logo .logoimg {
  display: inline-block;
  max-height: 40px;
}
}
@media only screen and (min-width: 40.063em) {
  .header .logo .logoimg {
    max-height: 70px;
  }
}

这使标志出现了我想要的方式，但现在我有巨大的顶部和底部填充物，我不知道如何把它们。Print screen
此外，社交媒体图标的显示比徽标低（它们应该与徽标一致）。
有什么建议吗？
谢谢您。

最佳答案

我不能用你给我的文件做一个合适的模型；我没有菜单和社交按钮的样式表的其余部分，也没有这些的HTML（你只给了我<?php?>标签）。然而，似乎唯一的问题是宽度为100%的.logo元素只是将这些元素推到一边，所以菜单按钮出现在上面自己的行上，而社交按钮则出现在下面自己的行上。
这可能是头太高的唯一原因，所以填充问题应该自行解决。
因此，删除您添加的行，并以小于100%的宽度直接指向<img>标记。
以下CSS似乎是必要的，以使图像适合您提供的容器大小：

header .logo .logoimg {
  width: 100%;
}

header.fixed .logo .logoimg {
  width: auto;
}

此外，将medium-4的子级的<div class="row full-width-row">类分别更改为medium-3、medium-6和medium-3。这给了标题（中-6）六个二十分之二的空间，其他人得到25%的每一个。这是尽可能小的社会按钮。

Medium

html - 正确设置徽标大小+删除填充