Why does the border not line up with content? - html

Question

I'm new to CSS/HTML, and I can't figure out why the border does not line up with the content/image. The bottom border is offset by a few pixels, leaving a gap between the edge of the picture and the actual border. Does anyone know how to fix this?
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 [phone]</em><br> 📧
<em>&nbsp info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>Ⓜ</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>
https://jsfiddle.net/wp9cn3kt/1/

Answer 1

Just give display: block; property to your image and that's it.
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" style="display: block;" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 [phone]</em><br> 📧
<em>&nbsp info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>Ⓜ</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>

Answer 2

If you want a simple fix, you can try put the id="photo" in the img element instead of the container (if no need to have a container).
<div> <!--Skyline Photo-->
<img id="photo" src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
Styling in original code:
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}