html - I need help with using first-child and last-child CSS selectors -

I have a three column layout within a line, I want to add the border to the right of each column except the previous call. I also want to remove the left padding and want to change it with the left margin from the first column, and remove the correct padding and replace it with the right margin from the last column. Tried to use first-child and last-baby selectors but they do not work.

Can anyone tell me in the right direction?

  #row {}. Box {border-right: 1px dotted # e1e1e1; Margin: 0; Padding: 0 10px; Width: 139px; } #row div: First-child {padding-left: 0; Margin-left: 10px; } #row div: last-child {boundary-right: 0; Margin-right: 10px; Padding-right: 0; } & Lt; Div class = "row" & gt; & Lt; Div class = "box" & gt; & Lt; H3 & gt; First title & lt; / H3 & gt; & Lt; Div & gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "box" & gt; & Lt; H3 & gt; Middle title & lt; / H3 & gt; & Lt; Div & gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "box" & gt; & Lt; H3 & gt; The last title & lt; / H3 & gt; & Lt; Div & gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;    
 
 
 That's because  line  is not a class ID . Change your CSS to:  
  .ro {} .box {border-right: 1px dotted # e1e1e1; Margin: 0; Padding: 0 10px; Width: 139px; } .row div: First-child {padding-left: 0; Margin-left: 10px; } .row div: The last child {boundary-right: 0; Margin-right: 10px; Padding-right: 0; }