边界半径仅适用于div的一侧

Question

当我遇到问题时，我正在为一个小型企业工作，当尝试将边框半径应用到div时它只将它应用到左侧，我搜索了google和stack overflow for a类似的答案，但没有找到任何东西。

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    background-color: #e0e0e0;
    }

    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>

如果有人有答案，我们将不胜感激

Answer 1

背景颜色与标题div重叠。

＆＃13;

＆＃13;

    body
    {
    background-color: #e0e0e0;
    }

    #banner
    {
    background-color: #404040;
    height: 10em;
    border-radius: 1em;
    box-shadow: -0.1em 0.3em;
    }

    #bannerimg
    {
    height: 65%;
    margin-left: 1em;
    margin-top: 1em;
    }

    #container
    {
    margin-left: 20em;
    margin-top: -7em;
    overflow: hidden;
    border-radius: 1em;
    }

    .list
    {
    float: left;
    padding: 1.5em;
    font-size: 2em;
    color: #067411;
    /*background-color: #e0e0e0;*/
    }

＆＃13;

    <header id="banner">
     <div id="container">
      <a class="list">Services</a>
      <a class="list">Remote Support</a>
      <a class="list">Home</a>
      <a class="list">About Us</a>
      <a class="list">Contact Us</a>
     <div>
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过添加flexbox样式，您可以获得所需的结果。

＆＃13;

＆＃13;

body{
  background-color: #e0e0e0;
}
#banner{
  background-color: #404040;
  height: 7em;
  border-radius: 1em;
  box-shadow: -0.1em 0.3em;
  display: flex;
  padding: 5px;
}
#bannerimg{
  height: 65%;
  margin-left: 1em;
  margin-top: 1em;
}
#container{
  background-color: #e0e0e0;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1em;
  align-items: center;
}
.list{
  padding: 1.1em;
  font-size: 1.2em;
  color: #067411;
}

＆＃13;

<header id="banner">
 <div id="container">
  <a class="list">Services</a>
  <a class="list">Remote Support</a>
  <a class="list">Home</a>
  <a class="list">About Us</a>
  <a class="list">Contact Us</a>
 </div>
</header>

＆＃13;

＆＃13;

＆＃13;