How to change all elements (divs) on website from pixels to percentages

Firstly, I have been handed this website from a friend to help to build and develop. I haven't touched CSS in a long time and I am having a couple of problems. I am trying to make this website to continually fit the browser.

I understand it is because he has been using pixels to measure the classes and not percentages, so it has become fixed. How do I go about changing all the classes to percentages, so the webpage will be fluid and fit the browser window if made smaller. I presume this will be all mathematical?

I know @media queries are not relevant.

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Vivid Shop Display</title>
<link rel="stylesheet" href='css/vivid-style.css'>
<link rel='stylesheet' href='css/scroller.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
<header>
<div class="vd-navigation-wrapper">
     <div class="vd-settings-wrapper">
        <div class="vd-user-settings">
        </div>
        <div class="vd-currency-selector">
        </div>
        <div class="vd-language-selector">
        </div>
     </div>
     <div class="vd-nav-wrapper">
            <ul>
                <li>Shop</li>
                <li>About</li>
                <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
                <li>Lookbook</li>
                <li>Contact</li>
            </ul>
     </div>
      <div class="vd-cart-wrapper">
       <div class="vd-cart-selector"></div>
      </div>

</div>

<!--Mobile Navigation-->
  <nav class="vd-hide">
  <div class="header-top clearfix">
   <a class="nav toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1>
  </div>
    <ul id="menu">
      <li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul>
  </nav>
  </div>
 </header>
<!--End Mobile Navigation-->

<div class="vd-page-container">
 <div class="vd-grid">
  <div class="vd-grid-left-col">
    <div class="vd-grid-main-box vd-margin-bottom">
     <div class="vd-text-wrap">
        <h1>Header Text</h1>
        <h2>Secondary Title</h2>
        <p>Featured Text Here over two lines
if needed place here.</p>
</div>
    </div>
    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
   </div>
    <div class="vd-grid-right-col vd-margin-left">
     <div class="vd-grid-xtra-box">
      <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
      <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom">
     <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
    </div>
 </div>
</div>
<div class="clear"></div>
    <footer class="vd-footer">
       <div class="vd-widget-area">
        <div class="vd-footer-text">
            <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4>
          <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div>
        </div>
          <div class="vd-footer-links">
              <h4 class="vd-footer-title">HELP</h4>
            <ul>
                <li><a class="" href="#">HELP | FAQ'S</a></li>
                <li><a class="" href="#">RETURNS</a></li>
                <li><a class="" href="#">HOW TO SHOP</a></li>
                <li><a class="" href="#">CONTACT US</a></li>
                <li><a class="" href="#">STOCKISTS</a></li>
            </ul>
          </div>
         <div class="vd-footer-links">
          <h4 class="vd-footer-title">POLICIES</h4>
            <ul>
                <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li>
                <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li>
                <li><a class="" href="#">PRIVACY POLICY</a></li>
                <li><a class="" href="#">SECURITY POLICY</a></li>
            </ul>
          </div>
    <div class="vd-footer-links">
         <h4 class="vd-footer-title">CONNECT</h4>
            <ul>
                <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li>
                <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li>
                <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li>
                <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li>
            </ul>
          </div>
        <div class="vd-signup">
            <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4>
          <div class="wht">HTML Block to be added here for embedded email capture forms</div>
        </div>
    </div>
  <div class="vd-sub-footer">
      <ul class="vd-payment-options">
          <li class="vd-payment-icon american-express"></li>
          <li class="vd-payment-icon bitcoin"></li>
          <li class="vd-payment-icon jcb"></li> 
          <li class="vd-payment-icon master"></li>
          <li class="vd-payment-icon paypal"></li>
          <li class="vd-payment-icon visa"></li> 
      </ul>
    <div class="vd-copyright-wrapper">
      <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p>
      <p class="vd-attribution">"Virtual Visual Merchandising"</p>
    </div>
  </div>
</footer>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */


/*Vivid Global Styling*/
html {}
body {
    margin:0px;
    padding:0px;

    }
h1,h2,h3,h4,h5,h6,p,ul,li,span {
    margin:0px;
    padding:0px;
    }
h1 {
    margin:0 0 14px 0;
    }
h2 { 
    margin:0 0 10px 0;
    }
.wht {
    color:#fff;
    }
.clear {
    clear:both;
    }
/*Vivid Page Settings*/
header {
    width:100%;
    background-color:#fff;
    border-bottom:#000 1px solid;
    }
.vd-hide {
    display:none;
    }
.vd-settings-wrapper {
    width:15%;
    max-width:200px;
    }
.vd-user-settings {
    width:48px;
    height:48px;
    border:1px solid #000;
    background-color:#fff;
    float:left;
    margin: 12px 2px 0 21px;
    }
.vd-currency-selector {
    width:58px;
    height:21px;
    border:1px solid #000;
    background-color: #fff;
    float:left;
    margin: 12px 2px 1px 2px;
    }
.vd-language-selector {
    width:58px;
    height:21px;
    border:1px solid #000;
    background-color: #fff;
    float:left;
    margin:3px 2px 0 2px;
    }

/*Vivid Main Navigation*/
.vd-nav-wrapper {
    width:75%;
    height:78px;
    margin:0 auto;
    text-align:center;
    }
.vd-nav-wrapper ul {
    font-family: 'Montserrat', sans-serif;
    text-align:center;
    list-style: none;
    padding: 0;
    margin: 0;
    }
.vd-nav-wrapper li {
    text-decoration:none;   
    list-style:none;
    display:inline-block;
    margin: 22px 20px;
    vertical-align: middle;
    }
.vd-nav-wrapper a {
    text-decoration:none;   
    list-style:none;
    display:inline-block;
    margin: 18px 20px;
    vertical-align: middle;
    }
.vd-logo-img {
    margin:0px;
    padding:0px;

    }
/*Vivid Checkout Settings*/ 
.vd-cart-wrapper {
    width:10%;
    z-index:10;
    }
.vd-cart-selector {
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    background-color: #fff;
    margin: -11px 31px 0 2px;
    position: absolute;
    top: 23px;
    right: -9px;
    }

/*Vivid Main Wrapper*/  

.vd-page-container {
    max-width:1280px;
    margin:0 auto;
    }

/*Vivid Grid*/  
.vd-grid h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif;
    line-height:32px;
    color:#fff;
    }
.vd-grid p,span  {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height:17px;
    font-size:0.85em;
    margin:0;
    padding:0;
    color:#fff;
    }
.vd-grid h1 {
    margin:0;
    padding:0;
}
.vd-grid h2 { 
    font-size:1.2em;
    margin:0 0 4px 0;
    }
.vd-grid h3 { 
    margin:4px 0 4px 0;
    }
.vd-grid h4 { 
    margin:4px 0 4px 0;
    }
.vd-grid {
    width:1262px;
    margin:13px auto;

    }
.vd-grid-left-col {
    width:980px;
    float:left;
    }
.vd-grid-right-col {
    width:265px;
    float:left;
    }   
.vd-grid-main-box {
    width: 920px;
    height: 460px;
    background-color: #000029;
    padding: 20px 30px;
    }
.vd-grid-main-box img {
    width:100%;
    height:auto;
    position:absolute;

    }
.vd-grid-sub-box {
    width:270px;
    height:146px;
    background-image:url(../img/granda_hj.jpg);
    background-size:cover;
    background-position:top center;
    background-color:#000029;
    float:left;
    padding: 15px 25px;
    margin:0 0 15px 0;
    }
.vd-grid-xtra-box {
    width:225px;
    height:318px;
    background-image:url(../img/tst_img.jpg);
    background-size:cover;
    background-position:center center;
    background-color:#000029;
    padding: 10px 20px;
    }
.vd-text-wrap {
    width:100%;
    position:relative;
    top:340px;
    left:0px;
    }
.vd-margin-top {
    margin-top:10px;
    }
.vd-margin-right {
    margin-right:10px;
    }
.vd-margin-left {
    margin-left:10px;
    }
.vd-margin-bottom {
    margin-bottom:10px;
    }
/*Vivid Footer*/    
.vd-footer {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height:16px;
    padding: 0 30px;
    padding-bottom: 55px;
    background-color: #000029;
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vd-widget-area {
    padding: 15px 0 10px;
    border-top: 0px solid #e5e5e5;
    max-width: 1260px;
    margin: 0 auto 0px;
}
.vd-footer-text {
    display: inline-block;
    vertical-align: top;
    width: 26%;
    padding-right: 60px;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vd-footer-links {
    display: inline-block;
    vertical-align: top;
    padding: 0 30px 25px 0;
    width: 12%;
    line-height:22px;
    font-size: 12px;
    color: white;
}
.vd-footer-links ul {
    margin: 0;
    padding: 0;
    list-style: outside none;
    display: block;
    vertical-align: top;
}
.vd-footer-links li {
    font-size: 12px;
    color: white;
    text-decoration:none;
    }
.vd-footer-links a {
    font-size: 12px;
    color: #ccc;
    text-decoration:none;
    }
.vd-footer-links a:hover {
    font-size: 12px;
    color: white;
    }
.vd-footer-title {
    font-family: 'Montserrat', sans-serif;
}
.vd-signup {
    display: inline-block;
    max-width: 305px;
    width: 26%;
    font-size: 12px;
}
.vd-sub-footer {
    border-top: 1px solid #e5e5e5;
    padding-top: 25px;
    margin-top: 0px;
    font-size: 0;
    max-width: 1260px;
    margin: 0 auto;
}
/*Vivid Payment Icons*/ 
.vd-payment-icon {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1.2;
    color: #a7a7a7;
}
.vd-footer-linklist .vd-social-icon:before {
    font-size: 16px;
    width: 16px;
    text-align: center;
    margin-right: 5px;
    font-family: 'Social Icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vd-payment-options {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 12px;
    text-decoration:none;
    display:block;
    list-style: outside none;
}

.vd-payment-options ul {
    display:block-inline;
    list-style-type:outside none;

}
.vd-payment-options li {
    display:block-inline;
    float:right;
    padding: 0 0 0 10px;
    list-style-type:outside none;

}
.american-express:before {
    content: "\f001";
}
.bitcoin:before {
    content: "\f006";
}
.jcb:before {
    content: "\f028";
}
.master:before {
    content: "\f02d";
}
.paypal:before {
    content: "\f033";
}
.visa:before {
    content: "\f045";
}
/*Vivid Copyright*/ 
.vd-copyright-wrapper {
    float: left;
    margin: 0;
    width: 50%;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}
/*Vivid Responsive*/    
@media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {

}

Solution

You'll need to edit the CSS file.

Start with the outer DIVs and work your way in. Any element you want to be full width would have CSS like this:

.elementClassName{
   width: 100%
}

In HTML, we use id="idnamehere" in a tag to label it directly so we can target it specifically in CSS. We can use class="classname" for more generic CSS which can be applied to lots of divs.

So you can make a few classes in your CSS file:

    .Fullwidth{
  width:100%
}

.halfWidth{
 width: 50%
}

Then add them to the outer DIV to experiment.

Like if you add class="halfWidth" to the outer DIV and refresh the browser it will make the whole page only fill half the window. Remember that child divs(inside) inherit from parent divs.

Google the Box Model for HTML.