无法弄清楚为什么我的flex div不居中

Question

我不知道为什么我的图像div不在移动设备上居中。我以为可能是边距或填充错误，但没有。这就是它的样子-http://prntscr.com/p6wuul。从SS中可以看出，div的位置比中心位置更靠右。谁能帮我吗？ 这是我的HTML和CSS-

.flexer {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 600px;
}
.left {
	position: relative;
	flex: 1;
	z-index: 1;
  margin: 0 10px 0 0;
	text-align: center;
	background:
        linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
url(https://picsum.photos/600);

}
.right {
	position: relative;
	flex: 1;
	z-index: 1;
	margin: 0 0 0 10px;
		background:
        linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
url(https://picsum.photos/600);
}

.txt {	
	font-family: 'bebas_neuebook';
	color: #fff;
	font-size: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.txt:hover {
	color: #F0BEB4;
}
.txt:visited {
	color: #fff;
}

@media (max-width: 768px) {
	.flexer {
		height: 400px;
		width: 100%;
		margin: 0;
		}
	.left{
		width: 256px;
		height: auto;
		background-position: center;
		margin: 0px;
	}
	.right {
		width: 256px;
		height: auto;
		margin: 0px;
	}
	.txt{
		font-size: 48px;
	}
}
@media (max-width: 567px) {
	.flexer {
		
		flex-direction: column;
		margin: 0px;
	}
	.left {
		margin: 10px 0 0 0;
	}
	.right {
		margin: 10px 0 0 0;
	}
	.txt {
		font-size: 40px;
	}
}

<div class="flexer">
    <div class="left">
        <a href="***/about-us/" class="txt">About Us</a>
    </div>
    <div class="right">
        <a href="***/products/" class="txt">Products</a>
    </div>
</div>