html - Changing a fixed website to being fluid (CSS)

Question

I currently am developing a website to be responsive. I am new to CSS. I have a plan to include @media breakpoints for this to happen. Before the resolution hits a breakpoint, I really want the whole website to be fluid and to 'fit the screen' rather than being fixed as it is.

Because this website was coded by someone else before it was handed to me, I am unsure where to start changing it. Any help would be greatly appreciated.

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

/*Vivid Global Styling*/
html {
    height: 100%;
}
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: 100%;
    margin:0 auto;
    height: 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;
    width: 100%;
    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;
}

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>Feature

Answer 1

When using @media this part will be only used for whatever media you specify.

As you specifically asked for break-points this might get you started: Keep your css as it is, and than add/overwrite properties for lower screen sizes.

An example would be (at the end of your css):

@media (max-width: 600px) {
  .vd-grid-sub-box {
    clear: left;
    width: 100%;
  }

https://jsfiddle.net/etkz6zrv/

Hopefully you can to adopt this to the other selectors as well (with a little patience).