I want divide my HTML Page into 4 different vertical sections .

I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.

** My aspire end result: I don't want to see the color red of the body background color in the html.

body {
  background-color: red;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div >

  <hr>
</div>
<div >

  <hr>
</div>
<div >

  <hr>
</div>
<div >

  <hr>
</div>

CodePudding user response：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container>div {

margin:30px;
}
.flex-container hr {
   
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 10px;
    border-color: #FFF;
    box-shadow: none;
    border-width: 5px;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div >
  <div ><hr></div>
  <div ><hr></div>
  <div ><hr></div>
  <div ><hr></div>
</div>

CodePudding user response：

1. Set margin: 0 for body, it has a defualt margin.
2. Set <hr>'s margin to 0.
3. Set height for each div to be 25vh (vertical height).

body {
  background-color: red;
  margin: 0;
}

.intro {
  background-color: #674AB3;
  height: 25vh;
}

.edu {
  background-color: #A348A6;
  height: 25vh;
}

.Skills {
  background-color: #9F63C4;
  height: 25vh;
}

.end {
  background-color: #9075D8;
  height: 25vh;
}

hr {
  margin: 0;
}

<div >
  <hr/>
</div>
<div >
  <hr/>
</div>
<div >
  <hr/>
</div>
<div >
  <hr/>
</div>

CodePudding user response：

Something like this?

body {
  background-color: red;
}

.intro {
  height:200px;
  background-color: #674AB3 !important;
}

.edu {
  height:200px;
  background-color: #A348A6 !important;;
}

.Skills {
  height:200px;
  background-color: #9F63C4 !important;;
}

.end {
  height:200px;
  background-color: #9075D8 !important;;
}

<div >

  <hr>
</div>
<div >

  <hr>
</div>
<div >

  <hr>
</div>
<div >

  <hr>
</div>

CodePudding user response：

use div tag class with background color and height of div tag.

CodePudding user response：

You can try this approach as well.

body {background-color:transparent;}

.intro {
  background-color: #674AB3;
  height:100vh;
  width:100%;
}

.edu {
  background-color: #A348A6;
  height:100vh;
  width:100%;
}

.Skills {
  background-color: #9F63C4;
  height:100vh;
  width:100%;
}

.end {
  background-color: #9075D8;
  height:100vh;
  width:100%;
}

.wrapper {
  display:grid;
  height:100vh;
  width:100%;
  }

<div >
<div >
Hello
</div>

<div >
Hello
</div>
<div >
Hello
</div>
<div >
Hello
</div>

</div>

CodePudding user response：

You can simmply use display: flex to the parent container which is flex-container

like

<div style="display: flex;">
  <div ><hr></div>
  <div ><hr></div>
  <div ><hr></div>
  <div ><hr></div>
</div>

CodePudding user response：

<div >

    <div >
    
    </div>
    <div >
    
    </div>
    <div >

    </div>
    <div >

    </div>

.main{
    display: flex;
    grid-template-columns: repeat(4,1fr);
    width:100vw;
}
.intro {
  background-color: #674AB3;
  width: 25%;
  height: 75vh;
}

.edu {
  background-color: #A348A6;
  width: 25%;
  height: 75vh;
}

.Skills {
  background-color: #9F63C4;
  width: 25%;
  height: 75vh;
}

.end {
  background-color: #9075D8;
  width: 25%;
  height:75vh;
}

CodePudding user response：

You could try using grid! might as well make it responsive :D

This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:

grid-template-columns: repeat(4, 1fr);

to:

grid-template-rows: repeat(4, 1fr);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  background-color: #00000000; /* transparent color */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
  height: 100vh;
  margin: auto;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div >
    <p>intro</p>
</div>
<div >
    <p>edu</p>
</div>
<div >
    <p>Skills</p>
</div>
<div >
    <p>end</p>
</div>