Html 像谷歌地图一样对齐侧面板旁边的地图

我想在我创建的侧面板旁边对齐我正在使用的地图

我不太清楚它为什么没有正确对齐

谷歌地图：

我的地图：

我也希望它，所以当你调整大小，它停留在右侧的侧面板与每一个缩放

*{
    margin: 0;
    padding: 0;
    font-family: 'raleway', sans-serif;
}

.panel-header{
    background:#F66158;
    width: 563px;
    height: 177px;
}

.panel-header h1{
    font-size: 62px;
    color:#FFFFFF;
    text-align: center;
    line-height: 127px;
}

.menu-buttons ul{
    list-style: none;
    margin: 0 auto;
    text-align: center;
}

.menu-buttons ul li{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    width:279px;
    border-bottom: 5px solid transparent;
    font-size:18px;
}

.menu-active{
    border-bottom: 5px solid #FFFFFF !important;
    padding-bottom: 24px;
    width:279px;
}

.menu-buttons ul li a{
    color:#FFFFFF;
    font-family: raleway, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

.filter-settings{
    background:#D9D7D7;
    height: 94px;
    width: 563px;
}

.filters-applied{
    width: 49%;
    display: inline-block;
}

.filters-button{
    width: 49%;
    display: inline-block;
    vertical-align: top;

}

.filters-applied p{
    margin-left:30px;  
}

.filter-settings .filters-applied p:first-child{
    text-transform: uppercase;
    font-weight: 700;
    color:#656363;
    font-size:16px;
    margin-top:15px;
}

.filter-settings .filters-applied p:not(:first-child){
    font-weight: 300;
    color:#656363;
    font-size:16px;
}

.filters-button button{
    margin-top: 30px;
    margin-left: 110px;
    background:#7C7D7E;
    color:#FFFFFF;
    height:35px;
    width:112px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0px 3px 6px rgba(188,183,183, 0.67);
    position:relative;
    text-indent: 25px;
}

.filters-button button::before{
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left:10px;
    top:5px;
    background-image: url('../images/filter-icon.png');
}

.filter-display{
    background-color: #707070;
    width: 563px;
    height: 41px;
}

.filter-display p{
    color: #ffffff;
    font-size:14px;
    text-transform: uppercase;
    margin-left: 30px;
    display: inline-block;
    line-height:41px;
}

.filter-display img{
    float:right;
    position:relative;
    margin-right:20px;
    margin-top:7px;
}

.filter-active{
    color:#A5C3F5;
    font-weight:500;
}

.burger-thumb{
    display: inline-block;
}

.burger-info{
    display: inline-block;
    vertical-align: top;
    margin-left:10px;
}

.store-capacity{
    display: inline-block;
    color:#808080;
    font-size:14px;
    border: 1px solid #707070;
    width:100px;
    height:20px;
    padding-top:4px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}

.store-rating{
    display: inline-block;
    position:relative;
    left:10px;
}

.burger-list{
    margin-left: 30px;
    margin-top:40px;
}

.burger-section{
    border-bottom: 1px solid #D8D6D6;
    padding-bottom:40px;
    width: 500px;
    margin-bottom:40px;
}

#store-name{
    color:#3B3A3A;
    font-weight:700;
    font-size:32px;
    margin-top:7px;
}

.store-desc{
    color:#8E8E8E;
    font-size:16px;
    position:relative;
    top:8px;
    font-weight:400;
}

.burger-list{
    max-height:900px;
    max-width:532px;
    overflow-y: scroll;
}


#parent-container{
    height:900px;
    width: 100%;
}

.side-panel{
    width:41% !important;
    height:500px;
}

#map{
    background-image: url('../images/map.png');
    min-height:1220px; 
    width:100%;
}

大众
大众


炸薯条


汉堡


应用的过滤器：

按特定时间组织

按活动组织

过滤器
按价格对汉堡餐厅进行分类

开放空间
五个人
M3B 1Y6北约克约克米尔斯路865号

时间：上午11:00-晚上10:00

拥挤
鲁迪

M3B 1Y6北约克约克米尔斯路865号

时间：上午11:00-晚上10:00

拥挤
汉堡店的牧师

M3B 1Y6北约克约克米尔斯路865号

时间：上午11:00-晚上10:00

开放空间
乐天鹅

M3B 1Y6北约克约克米尔斯路865号

时间：上午11:00-晚上10:00

开放空间
乐天鹅

M3B 1Y6北约克约克米尔斯路865号

时间：上午11:00-晚上10:00

核心-这是一个布局问题

谢谢你展示你的作品/代码-但是，你也可以把它分解成一些不涉及小图标和字体的东西

其实只有3个元素

<main class="app">

  <aside class="sidebar">
    <ul>
      <li>thing</li>
    </ul>
  </aside>

  <section class="map-area">
    <iframe src='something'></iframe>
  </section>

</main>

然后将组件放入这些插槽中。：）

与其思考当前CSS不起作用的原因，不如考虑一下理想情况，然后在JSFIDLE或codepen之类的沙箱中构建一个示例，然后探索flex box。祝你好运！：）

奖金建议：不要设置明确的高度（高度：77px等），让内容决定其父项的高度。+尝试其他一些元素选项。那有很多div需要通读

核心部分-这是一个布局问题

谢谢你展示你的作品/代码-但是，你也可以把它分解成一些不涉及小图标和字体的东西


其实只有3个元素

<main class="app">

  <aside class="sidebar">
    <ul>
      <li>thing</li>
    </ul>
  </aside>

  <section class="map-area">
    <iframe src='something'></iframe>
  </section>

</main>

然后将组件放入这些插槽中。：）

与其思考当前CSS不起作用的原因，不如考虑一下理想情况，然后在JSFIDLE或codepen之类的沙箱中构建一个示例，然后探索flex box。祝你好运！：）


奖金建议：不要设置明确的高度（高度：77px等），让内容决定其父项的高度。+尝试其他一些元素选项。那有很多div需要通读


感谢您对情况的介绍。我了解
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.app {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  flex-basis: 260px;
  flex-shrink: 0; /* just one way to do it */
  height: 100%;
  overflow: auto;
  padding: 10px;
}

.map-area {
  flex-basis: 100%;
}

<main id="parent-container">
    <aside class="sidebar">
        <header class="sidebar-header">
            <h1>PopularTO</h1>
            <nav class="options">
                <ul class="item-list">
                    <li class="item">
                        <a class="link">Fries</a>
                    </li>
                    <li class="item active">
                        <a class="link">Burgers</a>
                    </li>
                </ul>
            </nav>
       </header>
       ... etc.