Html 我如何保持我的元素排列并保持在相同的位置？

所以我正在建立一个网站，请看这里

我想把上面的黑线和内容排成一行。。。然而，当我在一个屏幕上做这件事时，它在另一个屏幕上看起来就不一样了。要么太过向右，要么太短，要么底部重叠

我正在使用squarespace和CSS。。。我试图用position:relatve；顶部：px；左：px

我需要补充什么？这是我的css

.socialbanner {
    position: absolute;
    top: 20px;
    left: 0px;
    padding-right: 150px;
}

#headerpart {
    width: auto;
    height: 100px;
    margin-top: 0px;
    vertical-align: center;
}

#headerpart .socialicons {
    display: inline-block;
    padding: 3px;
    position: relative;
    top: 5px;
    left: 925px;
}

.linebreak {
    color: #434343;
    position: relative;
    top: 60px;
    left: 0px;
    height: 5px;
    max-width: 1100px!important;
    position: relative;
    min-width: 840px!important;
}

---

尝试在css中这样创建。 宽度取决于你

.main {
    width: 1000px;
    margin: 0px auto;
}

---

所以如果你看看www.girlzwithmoustices.com/home2，那就是我现在正在做的页面。。。我仍然有同样的问题，只有社会媒体图标。。。我无法让它们与下面图像的其余部分保持一致。。我希望图标与它下面图像的最右边部分对齐。。。请帮帮我，谢谢你的帮助！