Flex-end似乎不适用于flexbox

Question

我正在设置导航，我是flexbox的新手。我尝试使用flex-end和flex-start来创建左右元素（flex-around似乎对我来说有太多空间）。一切都保持一致，我似乎不明白我做错了什么。这是我的代码：

<header className="header">
    <div className="leftSide">
    <div className="one">One of left elements</div>
    </div>
    <div className="rightSide">
    <p className="two">One of right elements</p>
    </div>
    </header>

CSS:
.header{
    width: 100%; 
    height: 140px;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.leftSide{
    margin-left: 20px; 
    display: flex;
  justify-content: flex-start; 

}
.rightSide{
    margin-right: 20px; 
    display: flex;
  justify-content: flex-end; 

}