Additional blank space beside a webpage

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  left: 39vw;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e141f131b0d0a0c11131c113e19131f1712501d1113">[email protected]</a>">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>

What could be causing the additional space on the right side even though the margins and padding are set to 0?

htmlcss

Answer №1

It's all due to

h1 {
  ...
  left: 39vw;
  ...
}

It takes on the value of 100vw from

.place {
  height: 100vh;
  width: 100vw;
}

This results in your page width being 139vw, hence the extra padding. You can solve this issue by removing it:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d171c10180e090f12101f123d1a101c1411531e1210">[email protected]</a>">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hello to all you beautiful people online! My name is James and I enjoy coding, playing sports, and sleeping until 1 pm. You can find links to my limited social media accounts on the main page.</p>
    </div>
  </section>
</body>

Answer №2

Solving this issue is a simple process.

1) Adjust the following properties in your lmao class:

position: absolute;
right: 0;

2) Delete the following line in your h1 tag:

left: 39vw;

3) Replace width: 100vw in your place class with:

width: 100%;

These modifications will align the sidebar to the far right without any extra space.

Demo

Complete code snippet

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100%;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: absolute;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: 0;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7319121e160007011c1e111c33141e121a1f5d101c1e">[email protected]</a>">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing CakePHP from inserting comment tags in the output

Currently, I am working on creating an endpoint that will return JSON data. {"a":1,"b":1} Surprisingly, when my code runs, Cake inserts an HTML tag into the output result. {"a":1,"b":1} <!-- 0.0964s --> This unexpected formatting is causing issue ...

phpjsoncakephphtml

Increase the spacing between accordion panels on a webforms ASP.NET application

Tech: This webpage is built on an Asp.net Webforms application using a master page and an ajax accordion control. All elements for the page are contained within a designated placeholder. The design of the webpage includes an ajax accordion with multiple A ...

cssasp.netajaxwebformsaccordionpane

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

htmlcsshover

Is it possible to combine several m3u8 files into a single m3u8 file?

I am looking to consolidate multiple m3u8 files into a single file for seamless playback in one video player. How can I achieve this without compromising the individual clips? For instance, if I have zebra.m3u8, giraffe.m3u8, and lion.m3u8 files, is it pos ...

javascripthtmlhttp-live-streaminghls.js

Creating an interactive website by utilizing fundamental HTML/CSS along with PHP or WordPress

I need to create a customized website for my project, which should include an admin dashboard for the site owner to modify specific visual components as needed. My main concern is whether I should rely solely on core PHP, HTML, and CSS for this task. Ca ...

phphtmlwordpressweb

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

Connecting buttons to JavaScript functions that interact with MySQL database entries

I am working on a task involving rendering a database table using XMLHttpRequest in JavaScript to a PHP page. My goal is to display each entry from the table as an HTML row/cell with two buttons within each "entry". These buttons should trigger specific Ja ...

phpjavascriptmysqlhtmlajax

Automatically close an element when you click on a different element

Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the o ...

javascriptjqueryhtmlcss

Troubleshooting: Java Applet Failing to Load on Website

I have successfully developed a Java application that can locate the most recently created file in a specified folder. My ultimate objective is to integrate this application into a web page so that when a user visits the page, it automatically opens the la ...

javahtmlappletload

Select two out of the three links from a repeating HTML structure using JQuery

Having difficulty creating an efficient jQuery selector to choose 2 out of 3 existing a elements within a repeating HTML structure. Below is the code snippet. The goal is to select Link 1, Link 2, excluding Link 3. Keep in mind that the entire HTML struct ...

jquerycssjquery-selectors

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...

javascriptcssvue.jsbutton

"Experiencing overflow issues with flex items on Firefox browser

Currently, I am working on constructing a form where the first row consists of a single text field with 100% width and the second row contains three equidistant fields. The layout works perfectly in Chrome but is experiencing overflow issues in Firefox. ...

htmlcssflexbox

OnePageCheckout may result in empty boxes being displayed due to OneStepCheckout CSS styling

Seeking advice for an issue with the Magento OneStepCheckout module. Upon checkout, there are three columns: customer data (working fine), payment options (selectable via checkbox), and details about the chosen payment method. Unfortunately, the informati ...

htmlcssmagentopaypalonestepcheckout

The dropdown navigation bar fails to close upon being clicked

I'm currently facing an issue with the navbar in my project. The bootstrap navbar doesn't close automatically after clicking on a link. I have to move my mouse away from the navbar for it to close, which is not ideal. Additionally, I'm worki ...

htmlcsstypescript

Is it possible to convert a Button into an input text field?

Hey there, I'm currently working on a project where I need to create a button that will transform into an input field and a submit button once clicked. I am utilizing React along with Bootstrap for this task. <div className="cold-md-2 col-sm- ...

javascripthtmlcssreactjsbootstrap-4

The showdown between unloading and Java Script - onbeforeunload begins now

Looking for a way to detect when a user exits my website. I have come across discussions about using AJAX calls to simulate pings for this purpose. I have found documentation on the unload event that occurs before the browser window closes or redirects. ...

javascriptjqueryhtmlonbeforeunload

Transfer information from a click event to a jQuery function

Having some trouble passing a C# list parameter to a jQuery method using onclick. It seems like the brackets [] and special characters in the string values are causing issues. For example, a string in the list might look like "*abc/def-". Any help would b ...

htmljqueryonclick

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

I have been attempting to insert a video into my HTML page, but it's not working properly on my iPhone (I only see a crossed out play button). The video loads fine on desktop and Android devices. This issue isn't browser-related as I encounter th ...

htmliosiphonevideo

Enhance the hover effect of the <li> tag with CSS styling

Having difficulty setting the hover height of my <li> tag. Below you can find a link to my jsfiddle with the HTML and CSS code. Any assistance would be greatly appreciated! Link to my menubar jsfiddle Here is the HTML code snippet: <!DOCTYPE ht ...

htmlcss