Div hat margin-right, auch wenn margin & padding-Wert ist 0

Habe ich mit einem div (#Jubiläum-container) mit ein img drin, aber das div hat ein margin auf der rechten Seite. Ich benutzte element untersuchen in Chrome, und es sagte, es gebe keinen Spielraum, aber es zeigt das orange daneben Platz. Ich bin versucht zu machen, die Kontakt info sitzen auf der rechten Seite, aber es lässt mich nicht. Ich habe bereits versucht die Einstellung margin:0 und padding:0.

Das problem ist unter dem Willkommens-header, div, das das Bild, dass sagt feiert 60 Jahre der katholischen service.
Sehen Sie selbst.

JSFiddle

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Saint Anthony Claret Catholic Church is a humble church in which Catholics from all over the city can come together and worship, confess or make use of our various services" />
        <meta name="keywords" content="saint, anthony, church, mass, confession, baptism, confirmation, wedding, matrimony, anaheim, california" />
        <meta http-equiv="author" content="Eduardo Pelaez" />
        <title>St. Anthony Catholic Church</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                <img src="images/logo.png" width="860" height="241" alt="St. Anthony Claret logo" />
                <div id="nav">
                    <ul id="nav-ul">
                        <a href="index.html"><li>Home</li></a>
                        <a href="#"><li>Services</li></a>
                        <a href="#"><li>Groups & Ministries</li></a>
                        <a href="#"><li>Schedule</li></a>
                        <a href="#"><li>Contact</li></a>
                        <a href="#"><li>About</li></a>
                    </ul>
                </div><!-- end #nav-ul -->
            </div><!-- end #header -->
            <div id="content">
                <div id="feature">
                    <img src="images/feature-img.jpg" width="1250" height="350" alt="Picture of our altar" id="feature-img" />
                </div><!-- end #feature -->
                <div id="col1">
                    <div class ="col1-sec sec" id="col1-sec1">
                        <h2>Welcome</h2>
                        <div id="anniversary-container">
                            <img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
                        </div><!-- end #anniversary-container -->
                        <div id="contact-container">
                            <p>1450 E. La Palma Avenue, Anaheim, CA 92805-1551</p>
                            <p><span class="contact-text">Phone</span> 714-776-0270</p>
                            <p><span class="contact-text">Fax</span> 714-776-6022</p>
                            <p><span class="contact-text">Email</span> <a href="mailto:[email protected]">[email protected]</a></p>
                        </div><!-- end #contact-container -->
                    </div><!-- end #col1-sec1 -->
                    <div class="col1-sec sec" id="col1-sec2">
                        <h2>Clergy</h2>
                        <p><span class="clergy-header">Pastor</span></p>
                        <p>Rev. Bill Cao</p>
                        <p><span class="clergy-header">Parochial Vicars</span></p>
                        <p>Rev. Douglas Zavala</p>
                        <p>Rev. Benjamin D. Hoang</p>
                        <p><span class="clergy-header">Deacons</span></p>
                        <p>Mr. August Mones</p>
                        <p>Mr. Salvador S&aacute;nchez</p>
                    </div><!-- end #col1-sec2 -->
                    <div class="col1-sec sec" id="col1-sec3">
                        <h2>Office Hours</h2>
                        <p><span class="hours-text">Weekdays</span> 9:00 AM to 8:00 PM</p>
                        <p><span class="hours-text">Saturdays</span> 9:00 AM to 5:30 PM</p>
                        <p><span class="hours-text">Sundays</span> 9:00 AM to 12:30 PM</p>
                    </div><!-- end #col1-sec3 -->
                </div><!-- end #col1 -->
                <div id="col2">
                    <div class="col2-sec sec" id="col2-sec1">
                        <p><span class="sidebar-header">Mass Schedule</span></p>
                        <p><span class="mass-header">Sunday</span></p>
                        <p>06:30 AM - English</p>
                        <p>08:00 AM - Espa&ntilde;ol</p>
                        <p>09:30 AM - English</p>
                        <p>11:00 AM - English</p>
                        <p>12:30 PM - Espa&ntilde;ol</p>
                        <p>05:00 PM - Espa&ntilde;ol</p>
                        <p>06:30 PM - Espa&ntilde;ol</p>
                        <p><span class="mass-header">Saturday Vigil</span></p>
                        <p>05:00 PM - English</p>
                        <p><span class="mass-header">Monday-Friday</span></p>
                        <p>06:30 AM - English</p>
                        <p>08:30 AM - English</p>
                        <p><span class="mass-header">Saturday</span></p>
                        <p>08:00 AM - English</p>
                        <p><span class="mass-header">Friday</span></p>
                        <p>07:00 PM - Espa&ntilde;ol</p>
                        <p><span class="mass-header">Thursday</span></p>
                        <p>07:00 PM - Espa&ntilde;ol</p>
                        <p><span class="mass-header">Perpetual Help Novena Wednesdays</span></p>
                        <p>07:00 PM - English</p>
                    </div><!-- end #col2-sec1 -->
                    <div class="col2-sec sec" id="col2-sec2">
                        <p><span class="sidebar-header">Confessions</span></p>
                        <p><span class="confessions-header">Wednesdays</span></p>
                        <p>05:30 to 06:30 PM</p>
                        <p><span class="confessions-header">Saturdays</span></p>
                        <p>03:30 to 04:30 PM<br />or by appointment</p>
                    </div><!-- end #col2-sec2 -->
                    <div class="col2-sec sec" id="col2-sec3">
                        <p><span class="sidebar-header">May Fiesta Contests</span></p>
                        <p>Pie Baking Contest</p>
                        <div id="pie-contest">
                            <a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/pie%20baking%20flyer.pdf"><img src="images/pie-contest.png" width="468" height="487" alt="Announcement for pie baking contest" /></a>
                        </div><!-- end #pie-contest -->
                        <p>Salsa Recipe Contest</p>
                        <div id="salsa-contest">
                            <a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/salsa%20contest.pdf"><img src="images/salsa-contest.png" width="479" height="527" alt="Announcement for salsa recipe contest" /></a>
                        </div><!-- end #salsa-contest -->
                        <div id="karaoke-contest">
                            <a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/Karaoke%20Flyer.pdf"><img src="images/karaoke-contest.png" width="405" height="475" alt="Announcement for karaoke contest" /></a>
                        </div><!-- end #karaoke-contest -->
                    </div><!-- end #col2-sec3 -->
                    <div class="col2-sec sec" id="col2-sec4">
                        <p><span class="sidebar-header">Links</span></p>
                        <ul>
                            <li><a href="http://www.ccoc.org/">Catholic Charities</a></li>
                            <li><a href="http://www.rcbo.org/">Diocese of Orange</a></li>
                            <li><a href="http://w2.vatican.va/content/vatican/en.html">The Holy See</a></li>
                        </ul>
                    </div><!-- end #col2-sec4 -->
                    <div class="col2-sec sec" id="col2-sec5">
                        <p><span class="sidebar-header">Financial Report</span></p>
                        <div id="financial-report">
                            <a href="http://stanthonyclaret.org/announcements-anuncios/"><img src="images/report.png" width="833" height="1069" alt="Cover for the report of our expenses" /></a>
                        </div><!-- end #financial-report -->
                        <p>Fiscal Year Ending</p>
                        <p>06.30.14</p>
                    </div><!-- end #col2-sec5 -->
                </div><!-- end #col2 -->
            </div><!-- end #content -->
            <div id="footer">
                <p>Copyright &copy; 2015 Saint Anthony Claret Catholic Church - All Rights Reserved</p>
            </div><!-- end #footer -->
        </div><!-- end #page -->
    </body>
</html>

CSS

body {
    width: 90%;
    margin: 0 auto;
    text-align: center;}
#content {
    overflow: auto;}
#nav, #feature, #footer {
    margin: 1%;}
#col1, #col2 {
    float: left;
    margin: 1%;}
#col1 {
    width: 62.6%;}
#col2 {
    width: 31.3%;
    margin-right: 0%;}
li {
    display: inline;
    padding: 0.5em;}
#nav, #footer {
    padding: 0.5em 0;}
#feature, .sec {
    margin-bottom: 1em;
    background-color: #efefef;} /* remove background color when completed */
/* end general styling */
#feature-img {
    height: auto;
    width: 100%;}
/* end feature styling */
#anniversary-img {
    max-width: 100%;
    max-height: 100%;
    float: left;}
#anniversary-container {
    height: 15em;
    width: 15em;
    margin: 0;
    padding: 0;} /* make container proportionate to img */
#contact-container {
    width: 15em;
    float: right;} /* make element float inside #anniversary-container */
  • entfernen Sie einfach die Breite der #anniversary-container
InformationsquelleAutor Eduardo06sp | 2015-06-26
Schreibe einen Kommentar