Home/ Questions/Q 6191987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T02:52:00+00:00

A bit new to styling sheets. I have a div for my site’s content.

  • 0

A bit new to styling sheets. I have a div for my site’s content. I’ve aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn’t be using margin-right, but what is the best way to do this?

Please let me know if my question is unclear.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<link rel="stylesheet" type="text/css" href="style1.css" />

<title>
Putnam County Family Support Services - Resources
</title>

</head>

<body>

<div id="container">

    <div id ="top">

    <center><img src="images/logo1.jpg" alt="logo" /></center>


    </div>


    <div id="navigation">

        <ul>

        <li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';"> 
        <img src="images/home_nav.jpg" name="MyImage4"></a> </li>

        <li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';"> 
        <img src="images/services_nav.jpg" name="MyImage3"></a> </li>

        <li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';"> 
        <img src="images/resources_nav.jpg" name="MyImage2"></a> </li>

        <li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';"> 
        <img src="images/staff_nav.jpg" name="MyImage1"></a> </li>

        <li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';"> 
        <img src="images/contact_nav.jpg" name="MyImage"></a> </li> 

        </ul>


    </div>

    <di id="content">

    <h1>Contact</h1>

    <p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>

    <p>Phone number:</p>


    </div>


    <div id ="footer">



    </div>

</div>



</body>
</html>

CSS:

body {
background: #f3f6f3;
text-align: center;
}

#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}

#top {
padding-bottom: 25px;
}

#navigation {
float:left;
position: absolute;
}

#navigation ul {
list-style: none;
padding-top: 20px;
}

#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}

#content {
float: right;
border: 1px;
}

#content h1 {
margin-right: 175px;
}

#content p {
margin-right: 170px;
}


#footer {
clear: both;
font-size: 12px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;

    To center your H1, you should use the property : 

      #content h1 {
text-align: center;
}

#content p {
text-align: left;
}

    this centers your text, have a look here

    It would be quite handy if I could have a look at your HTML as well.

    • 0