Css positioning problem

HTML-CSS
1

the position of twitter icon should be relative to the class “wrapper” but is considered related to “main” Can anyone help?
Link - https://codepen.io/sxnaprkhr/pen/dKLRPO

2

change

.wrapper {
  display: block;

to

.wrapper {
  display: block;
  position: relative;

Absolutely-positioned items are positioned relative to the closest parent/grandparent/great-grandparent/etc that has position: relative set