Expand block elements to full width of web browser

Question

i want to expand the nav element and the main content flemen to the full webpage width. From the picture it currently shows that there are still some white space even after the width had been set to 100%. Does anyone have any suggestiopns on what could be causing this? Im not sure what the reason is for this, can anyone give me suggestions?

Thank you

Image link

*{
    margin 0px;
    padding: 0px;

}

.dev {
    border-style: dotted;
}

.box {
    background-color: deepskyblue;
    width: 40%;
    height: 50px;
    float: left;
    padding: 10px;


}
.inner {
    border-style: dotted;
    height: 60px;

}

.nav{
    margin-right: 50px;

}

div.nav li{
    display: inline-block;
    list-style-type: none;

}

div.inner_dropdown {
    display: none;
    position: absolute;

}

div.inner_dropdown a{
    color: black;
      display: block;
      text-align: left;

}

li.container_drop{
    display: block;
    padding-right: 10px;
}

li.container_drop:hover .inner_dropdown {
    display: block;
}

ul.navbarul{
    float: right;

}

.navbar{
    list-style-type: none;
    background-color: lightblue;
    width: 100%;
    margin: 0;
    overflow: auto;
    border-color: orange;
    border-top-style: solid;


}

.fixer_frame{
    height: 200px;

}

.fixer_frame{

}

.navbar_frame{
   margin-top: 50px;
   padding-left: 25%;
    width: 50%;

}

.main_frame{
    width: 100%;
    overflow: auto;
    background-color: cadetblue;
}

ul.mf_navbarul li{
    display: inline-block;

}

.mf_content_frame{
    position: absolute;
    height: 50px;
    width: 50%;
    box-sizing: border-box;
}


.navbar_frame div{
    display: block;
}

.mf_content{
    width: 100%;
    height: 500px;
    background-color: beige;
}
.full_container{
    width: 100%;

}

</style>

<div class="navbar">
    <ul class="navbarul">
       <div class="nav">
            <li>Parent link 1</li>
            <li>Parent link 2</li>
        
        <li class="container_drop">
            Parent link 3
        <div class="inner_dropdown ">
            <a href="#">Child link 1</a>
            <a href="#">Child link 2</a>
            <a href="#">Child link 3</a>
        </div>
        </li>
        <div>
        </div>
        <div>
        <div>
    </ul>
  </div>
  
  <div class="main_frame">
     <div class="navbar_frame">
      <div class="mf_navbar">
          <ul class="mf_navbarul">
              <li>Link 1</li>
              <li>Link 2</li>
              <li class="container_drop">Link 3
          </ul>
        </div>
        
    <div class="mf_content"></div>    
        
      </div>
  </div>

score 0 · Answer 1 · answered Oct 15 '19 at 18:07

0

I've pasted this into a codepen and I can see 8px of margin on the body tag, which is a default browser style.

Try using a CSS reset first before writing your own styles.

I have attached a codepen: https://codepen.io/DipoOgunmodede/pen/GRRZVLW

answered Oct 15 '19 at 18:07

DipoOgunmodede

77
1
9

CSS resets are fast becoming obsolete (in favor of a more slender set of custom overrides). I'd avoid loading one. – isherwood Oct 15 '19 at 18:10
1

While this may answer the question, you should add your code to the answer, in the event that the codepen link no longer works. – disinfor Oct 15 '19 at 18:12
Brilliant, that solved it. Does *{ } not reset all elements? – AskJheeze Oct 15 '19 at 18:23
Thank you DipoOgunmodede – AskJheeze Oct 15 '19 at 18:24

Expand block elements to full width of web browser

1 Answers1