Attempting to utilize Bootstrap 4 for website development, I encountered an issue when adding a logo image and text to the header. The image became stretched, as seen below: https://i.sstatic.net/3qRnE.png
Below is the HTML code used:
<header>
<div class="container">
<div class="row">
<img alt="logo" src="img/udacity.png" id="header-logo" class="col-lg-1 col-md-1 col-sm-1 col-1 img-fluid"/>
<h1 class="col-lg-11 col-md-11 col-sm-11 col-11" id="header-text">Text</h1>
</div>
</div>
</header>
Attempts to set the height in the CSS file didn't yield desired results as it couldn't match the height of the Text precisely, nor did it respond well when using percentages. How can this issue be rectified?
In addition, a border was supposed to be added to the row using
.row {border-bottom: 10px solid #000;}When inspecting the logo within Safari, the style properties were as follows:
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
box-sizing: border-box;
color: rgb(33, 37, 41);
display: block;
flex-basis: 8.333333015441895%;
flex-grow: 0;
flex-shrink: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
font-weight: normal;
height: 233px;
line-height: 24px;
max-width: 8.333333015441895%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
position: relative;
text-align: left;
vertical-align: middle;
width: 45px;