html - How to get rid of white space on right of div? -


what happening

enter image description here

what want

as can see, there pesky white space on right side of #demo-card though set body{padding: 0; margin: 0;}.

i tried:

#demo-card {     padding: 0;     margin: 0; }

but didn't work.

how rid of pesky white space?

if w/ appreciated!

code

html

<body> <div id="demo-card">     <header>         <h3><span class="problem-number">11</span> <span class="problem-equation">problem</span></h3>      </header>     <!--<button id="run">run demo</button>-->     <div class="iframe-container">         <iframe id="demo-iframe" src="mathsynthesis/learningbyexample/gui/web/mathsynth.html">             <p>your browswer not support iframes</p>         </iframe>     </div> </div> </body>

css

body{     padding: 0;     margin: 0;     font-family: 'work sans', sans-serif; }  /*demo-card formatting*/ #demo-card {     width: calc(100vw - 40px);     height: calc(100vh - 40px - 50px); /*40px borders, 50px menu*/     background-color: white;     border: 20px solid #86e1d8; }

jsfiddle

on div id demo-card have css set:

width: calc(100vw - 40px);

which equivalent total width of browser window, minus 40px.

instead, set to:

width: 100%;

and should work.


Comments

Post a Comment