CODEWITHSUNDEEP
htmlcss
bgongre
bgongre

Reputation: 65

WhiteSpace When Resizing Webpage

I've been working on creating a resume but have an issue with white space in the "Work History" section. Once you start to collapse the webpage the unordered lists run off the page and create unwanted white space along the right side of the page. I've tried quite a few things as well as searching for answers but I'm still at a loss to fix this.

<div id="wrapper">
<div id="leftcolumn">
    <p><b>Assurant Inc, Remote Technical Support</b></p>
  <p>April 2017 - Present</p>
</div>
<div id="rightcolumn">
    <div>
      <ul>
        <li>Remote support of mobile devices for customers of T-Mobile, US Cellular, and Comcast.</li>
        <li>Technical support via Intercom, phone call, and email.</li>
        <li>Mobile application support for iOS and Android.</li>
        <li>Training customers on utilization of "Pocket Geek," company application.</li>
        <li>Document resolutions in Microsoft Dynamics.</li>
        <li>Add articles to knowledge base in Microsoft Dynamics.</li>
        <li>Supporting customers with in home Smart Devices such as August Smart Lock, Philips Hue, LIFX, Amazon Echo, Google Home, as well as others.</li>
      </ul>
     <hr>
 </div>
</div>

https://codepen.io/bgongre/full/EXKXye/

Thanks in advance.

Upvotes: 1

Views: 54

Answers (2)

marcos.efrem
marcos.efrem

Reputation: 767

You have to add to id=wrapper the following property "display: inline-block;" but remember, you can´t repeat id so you will have to name this layer with a class

Upvotes: 0

Ben
Ben

Reputation: 317

try this in your css: 

#wrapper {
    width: 80%;
    margin: 0 auto;
    display: table;
}
#leftcolumn {
    width: 20%;
}
#rightcolumn {
    width: 40%;
    margin: auto;
}

Upvotes: 1

Related Questions