Why are the two lines for this section of my website are different sizes when they're the same pixel height? Please check the snippet below.

What are other good methods of creating sections divider lines?

body {
  margin: 0px;
}

p,
a,
h1,
h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

.seg-2-line {
  height: 1px;
  background: hsl(240deg 19% 88%);
}

<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

try using <hr> tag, and apply CSS to that

CodePudding user response：

Normally you would use a border to do horizontal rules?

body {
  margin: 0px;
}

p,a,h1,h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51,82,124,1) 0%, rgba(18,59,114,1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

.seg-2-line {
  height: 1px;
  border-bottom: 1px solid hsl(210deg 18% 87%);
  
}

<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing">
    <div class="seg-2-text">
      <h2>Secure cleanup with one click</h2>
      <p>HI, HI</p>
    </div>
  </div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Why not use the hr which is what you wanted?

body {
  margin: 0px;
}


hr { width: 60vw;  }

p,
a,
h1,
h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

<div class="seg-2">
  <hr/>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
    <hr/>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>