Pulling my hair, two twitter timeline feeds next to each other cant center them

HTML & CSS
1

Hi all,

Thanks for reading and appreciate your help.

I got the following two embbed timelines next to each other.

<a class="twitter-timeline" href="MYTIMELINE1" data-widget-id="435670274034249728">Loading Tweets...</a>
<a class="twitter-timeline"  href="MYTIMELINE2"  data-widget-id="435706855822614528">Loading Tweets..."</a>

However. I cant seem to center them on the html page, next to each other with 20 margin in the middle.
I cant change the class “twitter-timeline” to position them individualy as then the twitterfeeds dont work anymore. Anyone got a clue how to do this? If use below, it aligns right, next to each other but not in middle of the page (as a group)


.twitter-timeline {
	position: relative; 
	height: 250px;
	width: 470px;  
	background: black; 
	margin-top: 0px; 
	margin-left: 20px;
    margin-right: 20px;
	}
2

try adding display: inline-block to the class.

3

Context matters here (e.g. are these links inside a div or other parent element?), but here’s a simple example that incorporate’s Patche’s suggestion:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

	div {text-align: center;}
	.twitter-timeline {display: inline-block; margin: 0 10px;}

</style>
</head>
<body>

<div>
	<a class="twitter-timeline" href="MYTIMELINE1" data-widget-id="435670274034249728">Loading Tweets...</a>
	<a class="twitter-timeline" href="MYTIMELINE2" data-widget-id="435706855822614528">Loading Tweets...</a>
</div>

</body>
</html>
4

sweet. appreciate it both.