Step 1. Open Weebly's HTML/CSS Editor

Click on "Design" at the top of the page, and then click on "Edit HTML/CSS" on the left side of the page.

---

Step 2. open the css file

Select "main-style.css" on the left.

---

Step 3. choose your position

Here is where you decide if you want your website to move to the left or right side of the screen. Scroll down to the following code and make the following changes in orange as shown in the codes below. If you want your website to move to the right side of the screen, add "float:right" to each of the codes below as shown in bold.

#wrapper-content {
  max-width: 1100px;
  width: 100%;
  min-height: 100%;
  /**margin: 0 auto;**/
  background: #ffffff;
  overflow: hidden;
  float:right;
}

#header {
  position: relative;
  display: table;
  width: 100%;
  height: 125px;
  /**margin: 0 auto;**/
  background: #ffffff;
  border-radius: 1px;
  -webkit-transition: all 180ms linear;
  -moz-transition: all 180ms linear;
  -o-transition: all 180ms linear;
  -ms-transition: all 180ms linear;
  transition: all 180ms linear;
  float:right;
}

​Click save.

---

You're done!  Publish your site to see its new positioning!

---

Tips & Additional Information

If you want to change the color of the background so that the site looks uniform, change the hex color in orange. If you have a background image, just replace that code with "background:PLACE HEX CODE HERE;"
​
#wrapper {
  background: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

---

comments powered by Disqus