Remove the right margin of my class "row"-CodePudding

I want to set right padding for my first image and my sample menu for responsiveness but I want my second image's right padding not affected.

I tried to give my class "col" a padding-right of 20px and set the margin-right of my class "row" of -20px but it seems not working.

I really appreciate any help you can provide.

body {
  border: 2px solid green;
}

.col {
  border: 2px solid red;
  margin-bottom: 10px;
  background-color: lightgrey;
  color: white;
  text-align: center;
  font-size: 150%;
  float: left;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}

.row {
  border: 2px solid yellow;
  width: 100%;
  margin-right: -20px;
}

.col img {
  width: 100%;
  height: 10em;
  border: 2px solid blue;
}

.col-xs-6 {
  width: 50%;
}

.clearfix,
.row {
  display: table;
  content: "";
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/practice1.css">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <p>This is just a demo</p>
    </div>
    <div >
      <p>This is just a demo</p>
    </div>
    <div >
      <p>This is just a demo</p>
    </div>
    <div >
      <p>This is just a demo</p>
    </div>
    <div >
      <p>This is just a demo</p>
    </div>
    <div >
      <p>This is just a demo</p>
    </div>
  </div>
  <div >
    <div ><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" alt="bird"></div>
    <div ><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" alt=""></div>
  </div>
</body>

</html>

OUTPUT

CodePudding user response：

I would do this whole thing in grid to be honest.

If you want your content to neatly fit in a grid, use grid. If you want your boxes to be aware of the size of your content, use flex-box.

However, you could just use a flexbox with space-between for the images class as a least amount of effort workaround:

.images {
  display: flex;
  justify-content: space-between;
}

You should avoid using padding and margin to position your elements, especially negative values.

Here's fiddle as an example.

CodePudding user response：

if it's not part of your design, you might consider containing everything within a border-box. That way, the borders do not overflow.

Set

*{
box-sizing: border-box;
}

Next, you can leverage specificity using the nth:child() selector. Since you need a 20px spacing between the two columns, you can set a 10px spacing at the right and left of the columns like this:

.row .col:nth-child(1){
  padding-right: 10px; // the first .col element in the row will have a right padding 
  }

.row .col:nth-child(2){
  padding-left: 10px; // the second .col element will have a left padding
  }

Check the updated version of your code on this pen. Hope this helps.