我修改了标题。php文件和CSS在我的页面上获得第二个徽标：dev.dutil。com/optilink测试页

右边是OptiLink标志。在全屏显示时，我已经了解了CSS需要在哪里：

.secondLogo { 
padding-top:15px;
display:block;
margin-bottom:-30px;
width:110px;
height:75px;
float:right;
position: absolute; 
top: 0; 
right:12%;
z-index: 1000; 
}

然而，对于响应性设计，它并不能完全发挥作用。当我将窗口折叠时，它会将其推入很远的地方，然后弹回到大英雄形象所在的位置，但并不一致。我也试图创建一个媒体屏幕规则，但我遇到了这样或那样的问题。

基本上，无论屏幕大小如何，右侧的OptiLink徽标都需要像道尔顿实用程序徽标一样贴在容器/英雄图像的边缘。关于如何更好地实现这一点，有什么建议吗？

<div class="container">
<div class="row">
<div class="site-branding">logo 1</div>
<div class="secondLogo">logo 2</div>
</div>
</div>
*menu goes here*

.site-branding {
    float: left;
    margin-bottom: -30px;
width: 110px;
}

.secondLogo {
    float: right;
    position: relative;
}