I have a header on my website that needs to have some icons on the right side. I have no idea what to do because the icons are positioned correctly but the div doesnt expand to them, which should be the default behaviour.

Here is the HTML:

```
<!DOCTYPE html>
<html>
<head>

    <title>Kingdom Hearts 358/2 Days HD</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">

</head>
<body>

    <div id = "socialMediaHeader">

        <div id = "socialMediaIcons">
            <a href = "http://twitter.com/kh_days_hd"><img class = "socialMediaIcon" src = "twitter_icon.png"></a>

            <a href = "https://www.youtube.com/channel/UC4mVq6c8YpYOuiTwuzejgDw"><img class = "socialMediaIcon" src = "youtube_icon.png"></a>
        </div>

    </div>

</body>
</html>

```

And here is the CSS:

```
* {
    margin: 0;
    padding: 0; 
}

#socialMediaHeader {
    background-color: black;
}

.socialMediaIcon {
    margin: 10px;
}

#socialMediaIcons {
    position: absolute;
    right: 0px;
}

#socialMediaIcons::after {
    content : "";
    display : block;
    clear : both;
}

```

EDIT: this code is a work in progress of me trying to fix the problem, disregard any stupid errors