在DIV中将两个SVG居中

Question

我正在尝试将两个单独的SVG垂直和水平居中放置在DIV中。我还希望它们在调整页面大小时能够响应并使用DIV矩形进行缩放。

我正在尝试构建它：

Mockup of site I'm trying to build

我目前正在尝试使用Flexbox，并且使图像居中，但当前它们位于单独的行中。

.container {
    background-color: #0000ff;
    display:flex;
    align-items:center;
    width:70%;
    height:4em;
    margin: auto;}

.containernest {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 6em;}

似乎也发生了一些浏览器问题，如下面的图片所示：

Example of my browser issue (Chrome vs Safari)

任何帮助将不胜感激！