How to handle margin-left correctly?

122 Views Asked by joel At 21 March 2020 at 15:12

The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?

Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.

Thank you for help.

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px;
}

.page-left{
 display: inline-block;
 margin-left: 430px;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-left">Portfolio</div>
    <div class="page-left">Languages</div>
   </div>
  </header>
 </body>

Original Q&A

There are 3 best solutions below

Manjuboyz On 21 March 2020 at 15:18 BEST ANSWER

You should create a new selector for your code for the second question:

View the result in full screen for actual margin-left working.

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px; 
}

.page-left{
 display: inline-block;
 margin-left: 430px;
  border:1px solid black;
}
.Languages{
 display: inline-block;
margin-left: 30px;
border:1px solid red;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-left">Portfolio</div>
    <div class="Languages">Languages</div>
   </div>
  </header>
 </body>

Farhan Ali On 21 March 2020 at 15:18

Just add margin-left: 430px; to the header-block div

Shinji Beta On 21 March 2020 at 15:23

You can use "flex" it's help you In different screen sizes It will help arrange the right proportions

Try.

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px;
    display: flex;
}

.page-first{
 display: inline-block;
 margin-left: 430px;
}
.page-second{
 margin-left: 50px;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-first">Portfolio</div>
    <div class="page-second">Languages</div>
   </div>
  </header>
 </body>

Example. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to handle margin-left correctly?

There are 3 best solutions below

Related Questions in CSS

Related Questions in CSS-POSITION

Related Questions in MARGIN

Related Questions in MARGIN-LEFT

Trending Questions

Popular # Hahtags

Popular Questions