how can I get an element to match the width of another element?

Question

So i'm making a webpage...

view here... www.girlzwithmoustaches.com/home2

I have a top social media icon banner which i made inside of a "header"...

The css is below.. Now i want the top banner to match the width % of the image below... So when the user resizes the window, or based upon their browser window size, the top banner of the social media icons will stay aligned with the right most portion of the image slideshow below it..

please help. how can i do this.. The social media icons are a basic ul with li and

 #headerwhat {
position: absolute;
top: 30px;
left:100px;
width: 70%;
height: auto;
vertical-align: middle;
horizontal-align: middle;

}

.smbanner {
width: 200px;
height: 50px;
position: relative;
float:right;
top: 0px;
left: 0px;

}

.smicons {
display: inline-block;
padding: 3px;
}

Answer 1

You have to use the same percentages if you want the widths to match.

So, if you have width: 70% for #headerwhat , the only way to get them to dynamically resize together is to set .smbanner 's width to 70% .

Is that what you're asking?

Answer 2

将图片放在标题内，并为顶部横幅提供100％的宽度