CODEWITHSUNDEEP
csscss-positionmarginmargin-left
joel
joel

Reputation: 255

How to handle margin-left correctly?

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?

enter image description here

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.

enter image description here

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>

Upvotes: 1

Views: 135

Answers (3)

Shinji Beta
Shinji Beta

Reputation: 21

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/

Upvotes: -1

Farhan Ali
Farhan Ali

Reputation: 176

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

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7056

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>

Upvotes: 1

Related Questions