Can't center title because of social media icons? - html

Question

I have put social media icons on the right side of my html, but I can't center my title anymore, how can I fix this?
I've tried text-align: center already, and it doesn't work.
#socialm{
float:right;
}
#socialm ul li{display: inline;}
<header>
<div id="socialm">
<img src="facebook.png" width= "45px" height="45px"/>
<img src="instragram.png" width= "45px" height="45px"/>
<img src="youtube.png" width= "45px" height="45px"/>
</div>
<h1>Photography and visual arts</h1>
</header>

Answer 1

You can't do this without absolutely positioning one of the elements.
Absolute positioning takes the element out of the flow so it ignores the other elements around it.
Here I positioned the 'social' div on the right instead of floating it. As you can see the heading is now centered.
You can also see the downside of positioning..without careful sizing, you get overlap. Media queries can address this.
#socialm {
position: absolute;
right: 0;
}
#socialm ul li {
display: inline;
}
header {
text-align: center;
}
<header>
<div id="socialm">
<a href="https://www.facebook.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.youtube.com/channel/..." target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
</div>
<h1>Photography and visual arts</h1>
</header>
JSFiddle Demo

Answer 2

I'm not sure if this is what you are looking for, but I simply just added text-align:center; to your h1 tag.
Here is the solution:
http://codepen.io/Glenvig/pen/dMeaQm