window inside window css

Question

How can i do this white section inside mine window? I don't understand, how can i centred this. Can you help me?

body {
  padding: 0;
  margin: 0;
  color: black;
  font-family: 'Montserrat';
}

#target {
  margin: 100px auto;
  width: 500px;
  height: 10rem;
}

#heading {
  background-color: #5e5c5c;
  padding: 0.4rem 0 0.05rem 1rem;
  border-radius: 0.4rem 0.4rem 0 0;
}

#target-heading {
  color: #fff;
  font-size: 1rem;
}

#main-window {
  border-radius: 0 0 0.4rem 0.4rem;
  background-color: #f1f1f1;
  height: 100%;
  width: 100%;
  margin: 0;
}

#parant-window {
  height: 90%;
  width: 90%;
  background-color: #fff;
}

<section id="target">

  <div id="heading">
    <h1 id="target-heading">Target indicator demo</h1>
  </div>
  <div id="main-window">
    <div id="parant-window"></div>
  </div>

</section>

Answer 1

body {
  padding: 0;
  margin: 0;
  color: black;
  font-family: 'Montserrat';
}

#target {
  margin: 100px auto;
  width: 500px;
  height: 10rem;
}

#heading {
  background-color: #5e5c5c;
  padding: 0.4rem 0 0.05rem 1rem;
  border-radius: 0.4rem 0.4rem 0 0;
}

#target-heading {
  color: #fff;
  font-size: 1rem;
}

#main-window {
  border-radius: 0 0 0.4rem 0.4rem;
  background-color: #f1f1f1;
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: 17px;
}

#parant-window {
  margin: auto;
  height: calc(100% - 17px);
  width: calc(100% - 30px);
  background-color: #fff;
  border: 1px solid lightgray;
}

<section id="target">

  <div id="heading">
    <h1 id="target-heading">Target indicator demo</h1>
  </div>
  <div id="main-window">
    <div id="parant-window"></div>
  </div>

</section>

БЛОГ НА HUSL

window inside window css

Ответы (1 шт):