Hi Guys,

Sorry for silly question. I have just started my adventure with html and css. I am trying to create website but I have some problems with text margin. Im not sure where to fix it. Have a look on the picture attached. I want move text 10px to the right . I was trying with margin left and right in body but haven't worked out. I was thinking to add extra div and place in text in there or something.

Here you have index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="studiokreatywne.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="check_menu.css" rel="stylesheet" type="text/css" />
</head>



<body>
<div id="container">
  <div id="banner"><img src="images/banner.jpg" width="968" height="100" />
    <ul id="Menu_studio" class="MenuBarHorizontal">
      <li><a href="firma.html">O Firmie</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Oferta</a>
        <ul>
          <li><a href="muzyka.html">Muzyka</a></li>
          <li><a href="fotografia.html">Fotografia</a></li>
          <li><a href="nauczanie.html">Nauczanie</a></li>
          <li><a href="inne.html">Inne</a></li>
        </ul>
      </li>
      <li><a href="wydarzenia.html">Wydarzenia</a>      </li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>
  <div id="main_image"></div>
  <div id="left_column"><img src="images/main_muzyka.jpg" width="316" height="130" /></div>
  <div id="center_column"><img src="images/main2_fotografia.jpg" width="316" height="130" /></div>
  <div id="right_column"><img src="images/main3_nauczanie.jpg" width="316" height="130" /></div>
</div>
<label for="opis"></label>
<p>Studio Kreatywne - młody, prężny team ludzi z masą pomysłów na zrealizowanie Waszych zamówień! Dla nas nie ma rzeczy niemożliwych!</p>
<p>Specjalizujemy się między innymi w szeroko pojętej fotografii kreatywnej, reklamowej, imprezowej, koncertowej, dokumentalnej.</p>
<p>Masz stronę www i nie wiesz, co dalej? Skomponujemy muzyczną oprawę, by strona zaczęła żyć nowym życiem :) Musisz oddać pilny projekt reklamowy, a jesteś w polu z pomysłem?  My się tym zajmiemy za Ciebie.</p>
<p>Potrzebujesz dotrzeć ze swoim produktem do masy odbiorców? Pozwól, że zrobimy to z przyjemnością wykorzystując znane nam metody.</p>
<p>Od pomysłu do gotowej realizacji - wszystko będzie jak w zegarku szwajcarskim, bo zależy nam na Twoim zadowoleniu.</p>
<p>Jesteśmy w stanie utworzyć dla Ciebie masę ciekawych rozwiązań i jeszcze się tym zaopiekować, byś nie musiał spęd zać sobie snu z powiek.</p>
<p>Wykonujemy również tłumaczenia z języka angielskiego, nauczymy Twoje dziecko grać na instrumencie klawiszowym, komponować, projektujemy biżuterię hand-made.</p>
<p>Nasze motto: Rzeczy niemożliwe wykonujemy od razu - na cuda będzie trzeba poczekać :)</p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Menu_studio", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Here is css file for index.html

@charset "UTF-8";
/* CSS Document */

#container {
	width: 968px;
	background: #FFF;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	overflow:visible;
}

#banner {
	position: relative;
}
#Menu_studio {
	position: absolute;
	/* [disabled]top: 50px; */
	right: 0px;
	bottom: -1px;
	height: 23px;
}

#main_image {
	background-image: url(images/main_gotowe.jpg);
	background-repeat: no-repeat;
	position: relative;
	height: 376px;
	width: 968px;
	
}

#left_column, #center_column, #right_column {
	width: 316px;
	float: left;
	margin-top: 10px;
}
#center_column, #right_column { margin-left: 10px; }


body {
	font-family: Avalon, sans-serif, serif;
	background-color: #000;
	color: #FFF;
	text-align: left;
	width: 968px;
	font-size: 16px;
	line-height: normal;
	word-spacing: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}
#studio_menu {
	position: absolute;
	/* [disabled]top: 50px; */
	right: 0px;
	bottom: 0px;
}

There is also extra css for menu bar attached. There is no point to show you this one.

Can you give me advice where I should look for, please ?

The least you can do is add padding to your p tags

p{padding:0 10px;}

But I would recommend adding a div that can hold all the elements in the content section and add padding to it. By this way you don't have to give padding to all the elements.

I added extra div. It works well. Thanks a lot.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.