White Space To The Right Of The Screen

June 25, 2024 Post a Comment

I need help with my site as it seems to have a rather large space of white to the right of my page. Everything fits into the page except if you were to scroll right you'd the part

Solution 1:

The problem is

#Start_bootstrap {
    margin: 0%43%;
    width: 100%;
}
#Description {
    margin: 1%41%;
    width: 100%;
}

Basically, you set their width tp 100% of their parent, and you push them a lot to the right.

If you want to center, better use

#Start_bootstrap, #Description {
    text-align: center;
}

html {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
body {
  background-color: white;
  width: 100%;
  height: 100%;
}
#Header {
  background-color: #2c3e50;
  width: 105%;
  height: 105px;
  margin: -1% -2.5%;
  position: relative;
}
#Title1 {
  width: 105%;
  height: 75px;
  background: #2c3e50;
  text-align: bottom;
  font-size: 250%;
  font-family: Helvetica;
  color: white;
  margin: 0.4%1%;
  position: fixed;
}
#nav_bar1 {
  font-size: 175%;
  margin: -60px45%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar1:hover {
  color: #18bc9c;
}
#nav_bar2 {
  font-size: 175%;
  margin: -60px67%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar2:hover {
  color: #18bc9c;
}
#nav_bar3 {
  font-size: 175%;
  margin: -60px80%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar3:hover {
  color: #18bc9c;
}
#Bootstrap {
  background-color: #18bc9c;
  width: 105%;
  height: 600px;
  margin: -2.5% -2.5%;
}
#Title2 {
  font-size: 320%;
  font-family: Helvetica;
  color: white;
  margin: 0%25%;
}
#img {
  margin: 4%45%;
}
#Start_bootstrap, #Description {
  text-align: center;
  font-family: Helvetica;
}
#Portfolio {
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
  margin: 280px auto;
}
#about {
  background-color: #18bc9c;
  width: 105%;
  height: 500px;
  margin: 795px -2.5%;
}
#about_title {
  margin: -1200px auto;
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
}
#About_Me1 {
  width: 40%;
  margin: 1250px30%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix {
  width: 17.5%;
  margin: -161.5%55%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix2 {
  margin: -000px -300%;
  font-family: Helvetica;
  color: #2c3e50;
  font-size: 270%;
}
#Contact_Header {
  text-align: center;
  font-size: 270%;
}
#Contact_Info {
  width: 50%;
  margin: -1400px25%;
  font-family: Helvetica;
  color: #2c3e50;
  position: absolute;
  bottom: 0;
}
.center {
  float: center;
  text-align: center;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 102.5%;
  height: 60px;
  background-color: #18bc9c;
  margin: -110% -0.85%;
  font-size: 75%;
}

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Bootstrap</title><linkrel="stylesheet"href="css.css"></head><body><divid="Header"><divid="Title1">.@BOOTSTRAP</div></div><divclass="right"id="nav_bar1">EXPERIENCE</div><divclass="right"id="nav_bar2">ABOUT</div><divclass="right"id="nav_bar3">CONTACT</div><divid="Bootstrap"><imgsrc="profile.png"class="center"id="img"><h1id="Start_bootstrap">START BOOTSTRAP</h1><pid="Description">Web Developer - Graphic Artist - User Experience Designer</p><divclass="center"id="Portfolio"><p>My Experiences are..</p><imgsrc="C:\Users\ben\Pictures\inknpixel.png"></div></div><divid="about"></div><divclass="center"id="about_title">A bit more...</div><pid="About_Me1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum arcu in massa dapibus, in vehicula mauris consequat. Suspendisse ac mauris quis lorem commodo scelerisque. Duis in commodo nisl, vel volutpat ipsum. Pellentesque placerat lobortis
    faucibus. Nulla interdum quam a risus, aliquam porta. Mauris pulvinar, ante a vulputate rutrum, lorem diam blandit est, non porta quam enim eu lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est
    ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus.</p><pid="Vertical_fix">aliquam</p></div><divclass="center"id="Contact_Info"><pstyle="color: #2c3e50; font-size: 270%; font-family: Helvetica; text-align: 60%">You can find me at...</p><p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam
      nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus
    </p></div><divclass="footer"></div></body></html>

Html5 Tutorial

White Space To The Right Of The Screen

Solution 1:

Post a Comment for "White Space To The Right Of The Screen"