I want to remove right padding from a list of div-CodePudding

I would like to remove the right padding from the . I tried the below CSS however, I am not able to do so. I tried "padding-right:none" but nothing is happening.

#menu-bar-container-2 { border: 1px solid gray; }

.menu-bar-2 a {
  float: left;
  color: black;
  padding: 2px 16px 0px 16px;
  font-size: 15px;
  text-decoration: none;
  border-right: 1px #bb4545 solid;
}

.no-border {
  border-right: none !important;
  padding: none !important;
}

<div id="menu-bar-container-2">
  <div >
    <a href="">Home</a>
    <a href="">War in Ukraine</a>
    <a href="">Coronavirus</a>
    <a href="">Climate</a>
    <a href="">Video</a>
    <a href="">Asia</a>
    <a href="">UK</a>
    <a href="">Business</a>
    <a href="">Tech</a>
    <a href="">Science</a>
    <a href="">Stories</a>
    <a href="">Entertainment & Arts</a>
    <a href="">Health</a>
    <a href="" >More</a>
    <img src="images/Down Arrow.png">
  </div>
</div>

CodePudding user response：

padding-right: none; is invalid value property.

Change it to padding-right:0; or to padding:0;

border-right: none; is correct and valid.

CodePudding user response：

CSS padding syntax: padding: length|initial|inherit; So padding value must be either length or initial or inherit.

length: length specifies the padding in px, pt, cm, etc. [length can be use as percent (%) also]
initial: Set the padding to its default value.
inherit: Set the padding from its parent element.

So, padding has no none value. You can use either of these. Try padding-right:0px;.

CodePudding user response：

You need to change padding right to 0px padding: 2px 0px 0px 16px;

   .menu-bar-2 a {
      float: left;
      color: black;
      padding: 2px 0px 0px 16px;
      font-size: 15px;
      text-decoration: none;
      border-right: 1px #bb4545 solid;
    }