Huge space on margin left

could anyone help why codes deliver such hugE space on left side

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" type="text/css">


  </head>
  <body>
      <header>
        <h4>Japanese Translation Service Provider</h4>        
          <br>
          <h6>Initialized by ChanwitD</h6>
      </header>
             <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      
    <!-- Include all compiled plugins (below), or include individual files as needed -->    
    <nav>  <ul>
        <li id="one"><a href="myweb.html">Home</a></li>
        <li id="one"><a href="myweb.html">About me</a></li>
        <li id="one"><a href="myweb.html">Products</a></li>
        <li id="one"><a href="myweb.html">Contact</a></li>
      </ul>
    </nav>
    <main>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="pics/1.jpg" alt="Chania" class="slider_image_item">
    </div>

    <div class="item">
      <img src="pics/2.jpg" alt="Chania" class="slider_image_item">
    </div>

    <div class="item">
      <img src="pics/3.jpg" alt="Flower" class="slider_image_item">
    </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
&nbsp;
&nbsp;
      <div id="wrapper">
       <div id="left">
         <h3>Excellency</h3>
         <p>We deliver the best for our clients</p></div>
         <div id="center">
         <h3>Puntuality</h3>
         <p>We deliver our works on time</p></div>
        <div id="right">
        <h3>Promise</h3>
         <p>We keep promising upon our conditions, made with clients</p>
         </div>
 
     
      </div>
    </main>
    	
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <footer>
  &nbsp;
  <h5>Contact; Tel: 080-621-8464</h5>
            <h5>Email: chanwit.ditcharoen@gmail.com</h5>
            <h5>Line ID: u5113499</h5>
            <h5>. . . . .</h5>
  
  </footer>
</body>
 
</html>

css

a {
	color: #050404;
	display:block;
}
ul {
	margin-right: 450px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: inline-block;
	float: right;
}
nav {
	height: 40px;
}

header {
	margin-right: 40px;
}
main {
	margin-right: 40px;
	height: 680px;
}

li#one:hover {
	background-color: #FFFFFF;
	color: #E9E9E9;
}
li#one {
	background-color: #E0F0F7;
}

footer {
	margin-right: 40px;
	display: block;
	background-color: #043755;
	height: 120px;
}
h5 {
	color: #AAAAAA;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider_image_item{
	
	width: 100% !important;
	max-width: 1400px !important;
}

h3{
text-align:center;	
}
#wrapper{
	text-align:center;

}
#left{
	text-align:center;
	width:333px;
	float:left
}
#center{
	text-align:center;
	width:333px;
	float:left;
	
}
#right{
	text-align:center;
    width:333px;
	float:left;	
}

im using dreamweaver cs 2015 for creation

Without actually trying the code out, the thing that strikes me is that you are loading bootstrap css, but not using any bootstrap classes in your css.
You either use bootstrap, or you don’t. Don’t load it if you are not using it.

1 Like

It looks as though you ought to have a huge gap on the right with all those margin-right:40px and using a right margin of 450px for your unordered list is no way to position anything.

Can you show us a mock-up of wht you are trying to achieve and a screenshot of what you have right now?

On left side of what?

The nav menu is 450px from the the right because you have put a margin-right on all uls (a bad idea for a global rule anyway):

ul {
	margin-right: 450px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: inline-block;
	float: right;
}

Not sure what the point of that rule was (and the float and superfluous inline-block) but you shouldn’t target all uls anyway so use a class and target the element directly although margin-right 450px smells of magic numbers and doesn’t seem viable.

You also have a missing closing div to your carousel.

We will need more specific information if none of the above is what you meant :wink:

The editor you use is of no matter to us :slight_smile: (unless you are using it as a wysiwtf)

4 Likes

First of all Bootstrap is a very code friendly framework that has some defaults. No wrap is used to cover all the code. Must use some .container or fluid-container classes as well as some row classes to clear things… The code you have mentioned is not browser compatible code. Secondly you have mentioned the right margin to UL (unordered list) which is 480px to right. That is creating issue for you. Please check them and if needed my help i am there for your help.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.